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Introduction 


Do  It  In  A  Flash 

Flash  CS3  is  an  advanced  version  of  Flash  that  is  enriched 
with  more  interactivity  than  the  previous  versions.  This  is 
extremely  useful  for  developing  highly  interactive  Web 
sites,  instructional  media,  online  advertisements,  computer 
games  and  content  for  various  mobile  devices. 

Using  Flash  you  can  design  and  develop  interactive  designs 
for  multipurpose  use.  You  can  import  Photoshop  PSD  files  and 
the  AI  files  of  Adobe  Illustrator. 

Flash  CS3  also  sports  a  new  interface  that  will  keep  those  of 
you  who  are  comfortable  with  Photoshop  and  Illustrator  feel  at 
home.  There  are  a  number  of  screens  in  Flash  CS3  that  are 
extremely  helpful  to  its  users.  The  panels  can  easily  be  collapsed 
to  work  on  a  small  screen,  and  you  can  just  click  on  a  collapsed 
panel  to  bring  it  back  up  to  work  on  it. 

Those  of  you  who  like  to  work  on  dual-monitor  desktops,  can 
easily  make  all  the  panels  appear  on  either  of  the  screens,  and 
this  helps  you  work  more  freely. 

Flash  CS3  provides  you  with  different  types  of  Workspaces. 
You  can  use  these  workspaces  to  work  on  different  computers  or 
in  different  places.  The  power  of  Flash  CS3  will  show  when  you 
learn  how  to  work  with  different  kinds  of  symbols,  Bitmaps, 
sound  and  video  files.  You  can  copy  and  paste  graphic  settings 
easily,  distribute  various  Flash  content  by  exporting  to 
QuickTime,  use  Action  Scripts  to  add  interactivity  to 
presentations,  and  much,  much  more. 

In  a  nutshell,  Flash  CS3  is  one  of  the  most  important  design 
tools  for  anyone  interested  in  a  career  in  electronic  media.  This 
book  will  get  you  started  on  your  journey  of  discovery,  and  put 
you  firmly  on  track  to  becoming  a  Flash  wizard! 
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Flash  Basics 

Tp  get  right  down  to  basics,  there  are  many  of  you  who  may  have 
never  used  Adobe  Flash,  or  for  that  matter,  any  Adobe  product 
before.  This  chapter  will  help  you  understand  the  interface, 
timelines,  layers,  guides,  and  more... 


1.1  The  Interface 


When  you  first  load  Flash  CS3,  you  will  see  the  Welcome  screen. 
This  Welcome  Screen  (in  Flash  CS3)  is  slightly  different  from  the 
Welcome  screen  of  earlier  versions  of  Flash,  for  example  in,  say, 
Flash  8.  You  can  clearly  see  the  difference  in  the  pictures  shown 
below  and  on  the  following  pages: 


/macromedia191 
FLASH*  Professional 


Open  a  Recent  Item 

£D  Open... 


Create  New 

icument 
0  Flash  Slide  Presentation 
^  Flash  Form  Application 
Jj^l  ActionScript  File 
ffi  Action  inication  File 

F|;rli  Jv:;i:.c;,|ii  Hz 
£})  Flash  Project 


Create  From  Template 

£3  Advertising 
S  Form  Applications 
£D  Global  Phones 
S  Japanese  Phones 
S  PDAs 

5  Photo  Slideshows 

6  Presentations 
£j  More... 

Extend 

Macror  \;  :  !  ash  xc  :  ige 


P 


*  Take  a  quicktour  of  Flash 

■  Learn  about  Flash  documentation 
resources 

*  Find  authorized  training 


Adobe  Creative  Suite  3 

Integration  like  never  before.  5ix  all-new 
editions  for  Web,  Design  and  Video, 


Donl  show  again 


The  Welcome  Screen  of  Flash  8 
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Open  a  Recent  Item 

Create  New 

Create  from  Template 

_J  Open... 

^  Flash  File  (ActionScript  3.0) 

ft  Advertising 

flj  Flash  File  (ActionScript  2.0) 

BREW  Handsets 

^  Flash  File  (Mobile) 

<  onsun  er  Devi  »  3 

^ctionSci  pt  ;i!e 

ft  Global  Handsets 

Actions               nication  File 

ft  Japanese  Handsets 

™    Flash  JavaScript  File 

Q  More... 

™    Flash  Project 

Extend 

Flash  Exchange  » 

Il]  Getting  Started  » 

[jg]  New  Features  » 
II]  Resources  » 

Creative  Suite  3.3  -  now  with 
1MB      Acrobat  9  Pro 

Create  and  share  professional,  dynamic  PDF 
documents  with  anyone,  anywhere 

I   |  Dont  show  again 

The  Welcome  Screen  of  Flash  CS3 
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The  Workspace  is  the  arrangement  of  various  Flash-elements  such 
as  the  Tools  panel,  Control  panels,  Property  inspectors  and  Windows. 
We  will  walk  you  through  what  each  of  these  is  in  later  sections. 

You  can  change  the  workspace  layout  from  the  "Workspace" 
drop-down  menu.  There  are  three  workspace  layouts  available  to 
you  in  Flash  CS3:  Default,  Icons  and  Text  Default,  and  Icons  Only 
Default.  The  same  options  can  be  seen  from  the  Window  menu  as 
well:  Window  >  Workspace. 


The  Stage  and  the 
Off  Stage 


FLASH  CS3 

1.2  The  Stage 


FLASH  BASICS 


The  Stage  is  the  visual  workspace,  or  the  Document  Window,  of 
Flash  CS3.  It  is  the  large  white  space  that  is  seen  at  the  center  of 
the  workspace,  and  is  like  a  blank  space  or  a  frame  where  you  can 
insert  text,  images  and  graphics.  You  can  also  call  it  the  compos- 
ing canvas  of  Flash  CS3.  You  can  import  and  animate  various  ele- 
ments on  to  this  Stage.  The  gray  area  that  you  see  outside  the 
Stage  is  called  the  Off  Stage  area.  To  view  the  Off  Stage  area  you 
must  check  the  Pasteboard  option  from  the  "View"  drop-down 
menu:  View  >  Pasteboard.  By  default,  the  Pasteboard  option 
is  checked,  so  unless  you  un-checked  it  earlier,  you  don't  need  to 
do  anything  to  view  it.  You  can  easily  place  graphics  in  the  Off 
Stage  area  if  the  Pasteboard  is  on.  The  default  Stage  size  in  Flash 
CS3  is  550  x  400  pixels.  With  resolutions  being  what  they  are 
these  days,  you  might  need  to  change  this  size.  You  can  just  insert 
the  desired  value  into  the  Properties  panel.  By  changing  the 
Zoom  percentage  beside  the  Workspace  option,  you  can  change 

the  view  of  the 
Stage  size.  You  can 
either  select  a  pre- 
set zoom  percent- 
age from  the  drop- 
down menu,  or  just 
type  the  value  in 
the  field. 

A  single  function 
can  be  done  in  vari- 
ous ways  in  Flash 
CS3.  We  can  Zoom 
in  or  Zoom  out  the 
Stage  from  the  View 
drop  down  menu: 


Insert    Modify    Text  Commands 


Zoom  In 
Zoom  Out 


Ctrl+= 
Ctrl+- 


Preview  Mode 
Pasteboard 


Ctrl+Shift+W 


Rulers 
Grid 
Guides 
Snapping 


Ctrl+Alt+5hift+R 


Hide  Edges  Ctrl+H 
Show  Shape  Hints  Ctrl+Alt+H 
Show  Tab  Order 


2! .  ■ 

50% 

100% 

200% 

400% 

800% 


Ctrl+l 


Ctrl+4 
Ctrl+8 


Show  Frame 
Show  All 


Ctrl+2 
Ctrl+3 


View  Drop  Down  menu 


View  >  Zoom  In 
View  >  Zoom  Out 

You  can  also  select  the  Zoom  Tool  of  the  Toolbar  and  then  drag 
the  particular  section  of  the  Stage  to  either  Zoom  in  or  Zoom  out. 
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The  same  function  can  be  done  from  the  Magnification  option 
under  the  View  drop  down  menu:  View  >  Magnification.  The 
sub-menu  shows  various  Zooming  percentages.  The  'Fit  in 
Window'  sub  option  under  Magnification  (View  > 
Magnification  >  Fit  in  Window)  option  helps  to  fit  the  stage 
with  the  application  window.  You  can  restore  the  appropriate 
Zooming  percentage  in  case  the  stage  is  set  to  an  inappropriate 
percentage. 

You  can  change  the  background  of  the  Stage  from  the 
Properties  Inspector.  A  Colors  palette  opens  when  you  click  on 
the  Background  option  of  the  Properties  Inspector.  You  can 
choose  your  desired  color  from  the  Colors 
palette.  The  background  changes  immedi- 
ately when  you  select  a  color  from  the 
Colors  palette.  To  zoom  in  or  out  by  a  spec- 
ified percentage,  select  View  > 
Magnification,  and  select  a  percentage 
from  the  submenu,  or  select  a  percentage 
from  the  Zoom  control  at  the  upper-right 
corner  of  the  Workspace. 

1.3  The  Tools  Panel 


By  using  the  Tools  Panel  you  can  draw, 
paint,  select  and  modify  various  objects  in 
the  workspace.  You  can  also  change  the  view 
of  the  stage  by  using  this  Tools  Panels.  The 
Tools  in  the  Tools  Panel  are  grouped  in  vari- 
ous sections— tools  that  are  used  for  draw- 
ing, painting  and  selecting  other  objects  are 
grouped  together.  Similarly,  the  Zooming 
and  the  Panning  tools  (To  pan  the  applica- 
tion window)  are  grouped  in  a  separate  sec- 
tion. The  colors  area  includes  modifiers  for 
stroke  and  for  the  fill  colors.  We  will  go  into 
more  details  about  each  tools  later. 


ra 


 Selection  Tool 

B|  — p-  Sub  selection  Tool 

O        Free  Transform  Tool 

r^— r-  Lasso  Tool 

Pen  Tool 
T—U  Text  Tool 
Line  Tool 
Rectangle  Tool 
Pencil  Tool 
Brush  Tool 
Ink  Bottle  Tool 
<5>—  Paint  Bucket  Tool 
r-  Eye  Dropper  Tool 
Eraser  Tool 
Hand  Tool 
^  — p-  Zoom  Tool 

JLH —  Fill  Color 
—  Line  Color 

M 

■j     —  Swap  Color 
0  A —  No  Color 

|fy        Snap  To  Object 

*  j  Smooth 
-(— r-  Straighten 

The  Tools  Panel 
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The  Timeline 


1.4  The  Timeline 


While  developing  an  animation  var 
sequenced  in  the  Timeline.  The 
contents  of  a  Flash  document  can 
be  authorized  by  this  Timeline.  The 
layers  and  the  frames  can  be  organ- 
ized in  accordance  with  a  specific 
time  length  in  the  Timeline.  Just  as 
in  popular  movie  editing  software, 
you  can  divide  the  whole  docu- 
ment into  various  frames  accord- 
ing to  a  specific  time  frame. 
Similar  functions  can  be  done  with 
the  Timeline. 

The  Timeline  remains  open  in 
an  existing  workspace  by  default. 
In  case  it's  hidden,  just  tick  the 
Timeline  option  from  the  Window 
drop  down  menu:  Window  > 
Timeline. 

The  Timeline  is  a  fixed  window 
and  it  stays  on  top  of  every  object 
in  the  workspace.  You  cannot  drag 
the  Timeline  by  dragging  its  title 
bar.  You  can,  however,  drag  the 
Timeline  by  holding  the  gripper  of 
the  Timeline.  The  Timeline  helps 
to  provide  you  with  visual  clues  of 
the  animation.  For  example,  a  lot 


images  and  elements  are 


1  Help 

Duplicate  Window 

Ctrl+Alt+K 

Toolbars 

Timeline 

Ctrl+Alt+T 

Tools 

Ctrl+F2 

Properties 

Library 

Ctrl+L 

Common  Libraries 

Actions 

F9 

Behaviors 

Shift+F3 

Compiler  Errors 

Alt+F2 

Debug  Panels 

Movie  Explorer 

Alt+F3 

Output 

F2 

Project 

5hift+F3 

Align 

Ctrl+K 

Color 

Shift+F9 

Info 

Ctrl+I 

Swatches 

Ctrl+F9 

Transform 

Ctrl+T 

Components 

Ctrl+F7 

Component  Inspector 

5hift+F7 

Other  Panels 

► 

Workspace 

Hide  Panels 

F4 

Cascade 

Tile 

Window  Drop  down  menu 
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of  frames  and  layers  can  be  inserted  in  an  animation  by  using  the 
Timeline.  You  can  insert  a  number  of  animation,  and  develop  com- 
plex animations  by  using  layers  and  special  effects. 

The  column  of  the  left  side  of  the  Timeline  lists  the  layers  of 
an  animation.  In  the  right  side  of  the  layer's  name,  the  frames  that 
are  inserted  in  a  layer  appear. 

The  frame  numbers  appears  at  the  top  of  the  Timeline  in  the 
header  area.  The  frame  that  appears  on  the  stage  appears  in  the 
playhead  section.  The  detailed  information  about  the  current  frame 
is  displayed  at  the  bottom  of  the  Timeline,  and  you  can  drag  a  frame 
to  a  desired  position  in  a  particular  layer  within  the  Timeline.  You 
can  hide  the  Timeline  by  clicking  on  the  Hide  Timeline  icon. 

You  can  change  the  frame  display  by  selecting  the  desired 
option,  and  if  you  click  on  the  Frame  View  icon,  a  lot  of  options 
will  appear.  The  Frame  View  option  is  located  at  the  upper  right 
corner  of  the  Timeline.  Here  you  will  see  options  like  Tiny,  Small, 
Normal,  Medium,  Large,  Preview,  and  Preview  in  Context. 

Similarly,  you  can  change  the  Placement  of  the  Timeline  by 
selecting  the  available  options  of  the  Frame  View:  Frame  View  > 
Placement.  The  Placement  sub  menu  includes  options  like,  Above 
Document,  Below  Document,  Left  of  Document,  Right  of 
Document  and  Undock  from  Document. 

1.5  The  Layers 


The  concept  of  Layers  is  not  new  in  Designing.  Anyone  who  knows 
Photoshop  is  aware  of  this  useful  feature.  Layers  may  be  thought 
of  transparent  sheets  that  can  hold  objects.  While  developing  a 
very  big  animation,  you  may  be  confused  with  the  sheer  number 
of  objects  you  have  to  use.  But  if  you  distribute  those  objects  in  dif- 
ferent layers,  then  the  work  process  can  be  made  much  easier. 

You  can  systematise  various  elements  with  the  help  of  Layers, 
and  these  layers  are  like  containers  for  various  objects.  You  can 
now  work  independently— editing  text,  images  etc.,  of  a  layer. 
While  you  work  with  an  object  of  one  particular  layer,  the  objects 
on  other  layers  are  not  affected. 
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To  edit  the  objects  of  a  particular  layer,  first  you  have  to  select 
the  layer  in  the  Timeline.  Once  a  layer  is  activated,  a  pencil  icon 
appears  just  after  the  layer  or  the  folder  name.  Although  you  can 
only  activate  one  layer  at  a  time,  you  can  select  more  than  one  layer 
at  once.  When  you  start  creating  a  Flash  document,  only  one  layer 
is  shown.  In  order  to  insert  various  elements  into  a  document,  you 
will  need  to  insert  a  number  of  layers  as  well.  You  can  hide  and  lock 
layers,  and  can  customise  the  layers  as  well.  Layers  do  not  increase 
file  size  of  the  SWF  that  you  are  creating,  it's  only  when  you  add 
objects  into  a  layer  that  the  file  size  increases. 

You  should  always  use  a  separate  layer  to  insert  sound  in  Flash 
documents,  as  well  as  a  layer  for  ActionScript. 


Insert 


New  Symbol.,,  Ctrl+FS 

1    Timeline  ► 

Layer  1 

Timeline  Effects  ► 

Layer  Folder 
Motion  Guide 

Scene 

Frame  F5 

Keyframe 

Blank  Keyframe 

Create  Motion  Tween 
Create  Shape  Tween 

Inserting  a  Layer  from  the  Insert  menu 


To  insert  a  layer  in  the  Flash 
document,  all  you  have  to  do  is 

go  to:  Insert  >  Timeline  > 
Layer 

You  can  also  insert  a  layer  by 
clicking  on  the  Insert  Layer  but- 
ton. This  button  can  be  found  at 
the  bottom  of  the  Timeline. 
The  Insert  Layer  Button 


□ 


Insert  Layer 
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1.6  The  Properties  Panel 

The  Properties  Panel  is  a  combination  of  some  attributes  to  edit  the 
selected  part  of  the  Stage  and  of  the  Timeline.  The  same  functions 
can  be  done  by  other  tools  and  attributes  that  are  available  in  other 
menus,  but  here  you  can  access  all  those  options  swiftly.  This 


■  Properties  :>    Filters  Parameters 

-  X 

1  ^      Document                      Size:  [    550  x  400  pixels 
Untitled- 1                   Publish:  [  Settings.,. 

]    Background:    |~^|          Frame  rate:  |  12     |  fps 
]    Player:    9       ActionScript:  3.0      Profile:  Default 

® 

Document  class:    |                                            |  $ 

The  Properties  Panel 


Properties  panel  can  display  detailed  information  about  the  cur- 
rent document,  and  when  you  select  an  object  in  the  Stage  or  in 
the  Timeline,  its  properties  are  shown  here. 

From  the  Properties  Panel  you  can  change  the  stage  size,  the 
ruler  unit,  the  background  color  of  the  stage  and  the  frame  rate. 
By  default,  the  frame  rate  for  Flash  is  12  fps  (12  frames  per  second). 

If  you  want  to  make  the  ani- 
mation faster,  you  can 
increase  the  frame  rate. 
Remember,  reducing  the 
frame  rate  will  result  in  slow- 
ing down  the  animation. 

If  this  Properties  panel  is 
not  seen  then  we  can  select 
the  following  path: 
Window  >  Properties  > 
Properties . 

Otherwise  we  can  press 
[Ctrl]  +  [F3]  to  make  this 
Properties  panel  appear  on  the 
screen. 

When  we  select  a  text  on 
the  Stage  then  the  Properties 
panel  shows  the  following 
The  Properties  drop  down  menu  options:  Text  Type,  Font,  Font 


Duplicate  Window 

Ctrl+Alt+K 

Toolbars 

Timeline 

Ctrl+Alt+T 

Tools 

Ctrl+F2 

Library 

Ctrl+L 

Filters 

Common  Libraries 

*\ 

Parameters 

Actions 

F9 

Behaviors 

Shift+F3 

Compiler  Errors 

Alt+F2 

Debug  Panels 

Movie  Explorer 

Alt+F3 

Output 

F2 

Project 

Shift+F8 

Align 

Ctrl+K 

Color 

5hift+F9 

Info 

Ctrl+I 

Swatches 

Ctrl+F9 

Transform 

Ctrl+T 

Components 

Ctrl+F7 

Component  Inspector 

Shift+F7 

Other  Panels 

Workspace 

Hide  Panels 

F4 

Cascade 

Tile 
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Size,  Letter  Spacing,  Character  Position,  Font  Rendering  Method, 
Text  Color,  Text  Style  (Bold,  Italic),  Edit  Format  options,  Change 
Orientation  of  Text,  Selection  Width,  Selection  Height,  Selection  X 
Position,  Selection  Y  Position,  URL  Link,  and  Link  Target. 

When  we  select  an  image  on  the  stage  the  options  that  are 
shown  are  as  follows: 

Swap  the  bitmap  for  one  in  the  library,  Selection  width, 
Selection  Height,  Selection  X  position  and  Selection  Y  Position. 


J  Library  K  1 

-  x 

|  Untitled- 1 

Empty  library 

Name 

Type  ± 

□ 

Hi 

ts  <_\  nil  ] 

>  

1.7  The  Library 


The  Library  panel  is  represented  by  the 
Library  object.  It  is  a  collection  of  a 
number  of  media  objects  that  are  used 
in  a  Flash  file.  The  object  is  a  container 
of  various  objects  like  bitmap,  symbol, 
sounds  and  video.  It  can  easily  be 
accessed  by  f  1 .  getDocumentDOM  ( 
)  .  Library.  We  will  discuss  about  this 
and  other  commands  in  later  sections. 


The  Library 


1.8  Guides  and  Grids 


The  Grids  are  the  set  of  lines  that  appear  on  the  Workspace.  To 
show  the  Guides  and  Grids  you  first  have  to  check  on  the  Rulers 
option  from  the  View  drop  down  menu:  View  >  Rulers.  Once  the 
Rulers  appear  on  the  Workspace,  you  can  drag  the  Guides  from 
the  Rulers.  There  are  two  types  of  Rulers— Horizontal  and  Vertical. 
While  creating  nested  Timelines,  Guides  that  can  be  dragged 
appear  on  the  Stage,  and  they  only  show  if  the  Timeline  in  which 
they  are  created  is  activated. 
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To  view  Guides 
and  Grids  on  the 
Stage,  you  have  to 
check  the  Show 
Guides  and  Show 
Grids  options.  The 
Grid  option  is  avail- 
able in  the  drop 
down  menu  of  the 
View  option  and  the 
Show  Grid  option  is 
available  in  the  sub 
menu  of  the  Grid 
option: 

View  >  Grid  > 
Show  Grid. 

Similarly,  the 
Guides  option  is 
available  in  the  drop 
down  menu  of  the 
View  option  and 
from  the  sub  menu 
of  the  Guides  option 
we  can  reach  the 
Show  Guides  option: 

View  >  Guides 
>  Show  Guides . 

You  can  move  the 
guide  by  clicking  on 
the  ruler  with  the 
help  of  Selection 
tool.  By  doing  this 
you  can  easily  drag 
the  guide  to  where 
you  desire. 

You  can  easily 
edit  the  Grids  and 


Workspace  with  Guides  and  Grid 


Insert    Modify    Text  Commands 

Goto  ► 

Zoom  In  Ctrl+= 
Zoom  Out  Ctrl+- 
Magnification  ► 

Preview  Mode  ► 
Pasteboard  Ctrl+Shift+W 

Pulers  Ctrl+Alt+Shift+P 

Grid                                       ►  1 

Show  Grid   Ctrl+'  1 

Guides  M 

Edit  Grid...  Ctrl+Alt+G 

Snapping  ► 

Hide  Edges  Ctrl+H 
Show  Shape  Hints  Ctrl+Alt+H 
Show  Tab  Order 

Show  Grid 


I  Insert    Modify    Text  Commands 


Zoom  In 

Ctrl+= 

Zoom  Out 

Ctrl+- 

Magnification 

Preview  Mode 

► 

1/  Pasteboard 

Ctrl+Shift+W 

luler  s 
Grid 


Ctrl+Alt+Shift+R 


Snapping  ► 

Lock  Guides  Ctrl+Alt+j 

Hide  Edges  Ctrl+H 
Show  Shape  Hints  Ctrl+Alt+H 

Edit  Guides . . .  Ctrl+Alt+Shif t+G 
Clear  Guides 

Show  Guides 
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the  Guides.  To 
edit  a  Grid, 
you  can  select 
the  Edit  Grid 
option: 

View  > 
Grids  > 
Edit  Grids. 

Here,  the 
Grid 
box 
appear.  In  this 
dialog  box  we 
will  see 
options  like 
Color,  Show 
grid,  Snap  to 
grid,  Snap 
accuracy  etc.  A 
Colors  palette 


Color: 


SI 

I  I  Show  grid 
I  1 5nap  to  grid 


18  px 


18  px 


Snap  accuracy: 


Normal 


dialog  Customisjng  the  Grjds 
will 


Color: 


I  1 5how  guides 
□  5nap  to  guides 
I  I  Lock  guides 


5nap  accuracy: 


Normal 


OK 


Cancel 


Save  Default 


OK 


Cancel 


Clear  All 


Save  Default 


Set  Guides  to  whatever  colour  you  desire 


will  appear  if  you  click  on  the  Color  option  of  the  Grid  dialog  box. 
You  can  select  your  desired  grid  color  from  this  Colors  palette. 

You  can  edit  the  Guides  in  the  same  way.  Just  go  to  View  > 
Guides  >  Edit  Guides. 


1.9  The  Ruler 


The  Rulers  appear  on  the  document  if  you  check  on  the  Ruler 
option  from  the  View  drop  down  menu.  There  are  two  types  of 
Rulers:  Vertical  rulers  and  the  Horizontal  rulers.  These  rulers  can 
be  seen  along  the  top  and  the  left  side  of  the  workspace.  You  can 
edit  the  Rulers  from  the  Edit  Rulers  option.  View  >  Rulers  > 
Edit  Rulers.  From  this  dialog  box  you  can  change  the  color  of 
the  Rulers. 
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Workspace  with  Rulers 


You  can  denote  the  parameters  for  the  rulers.  To  do  this,  go  to 
Modify  >  Document. 

Here,  the  Document  Properties  dialog  box  will  appear.  At  the 
bottom  of  this  dialog  box  the  option  Rulers  Unit  appears.  If  you 
click  on  the  arrow  near  this  option,  you  will  see  a  drop  down 
menu  appear.  Options  like  Inches,  Inches  (decimal),  Points, 
Centimeters,  Millimeters  and  Pixels  are  available  in  this  drop 
down  menu.  Select  the  desired  Ruler  Unit. 
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The  Tool  Box 


The  Tool  Box,  or  Tool  Palette,  in 
Flash  is  a  palette  that  contains 
all  the  Tools  you  will  need 
when  working.  The  Tools  are 
arranged  in  a  categorized  manner  as 
per  their  genre.  They  are  broadly  clas- 
sified into  Selection  Tools,  Drawing 
Tools,  Coloring  Tools,  Transforming 
Tools  and  others.  Depending  on  the 
tool  you  select,  the  modifier  list  of 
that  particular  Tool  will  appear  in 
the  Properties  Inspector  located  at 
the  bottom  of  your  screen.  You  can 
edit  the  properties  of  the  Tools  from 
there.  Let's  get  to  know  the  tools  bet- 
ter. 

2.1  The  Selection  Tools 


2.1.1  Selection  Tool 

Selection  Tools,  as  the  name  sug- 
gests, are  used  to  select  objects  in 
the  stage  with  a  single  click.  You 
can  select  any  object  to  change  its 
properties,  change  positions, 
change  colors,  delet  or  resize  it, 
and  a  lot  of  other  things.  To  select 
multiple  objects,  you  can  draw  a 
rectangular  selection  with  the 
selection  tool  around  the  objects 
that  needs  to  be  selected.  The 


0- 


Selection  Tool 
Subse lection  Tool 
Free  Transform  Tool 
Lasso  Tool 
Pen  Tool 
Text  Tool 
Line  Tool 
Rectangle  Tool 

-  Pencil  Tool 
Brush  Tool 
Ink  Bottle  Tool 

■  Paint  Bucket  Tool 
fc  Eye  Dropper  Tool 
"  Eraser  Tool 

-  Hand  Tool 

■  Zoom  Tool 

-  Fill  Color 
Line  Color 


-  Swap  Color 
No  Color 


I  OH 

Snap  To  Object 


short  cut  to  select  this  tool  is  [V]  . 


Smooth 
Straighten 


The  Flash  CS3  toolbox 
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2.1.2  Subselection  Tool 

The  Subselection  Tool,  or  the  Direct  Selection  Tool,  is  used  to 
select  the  nodes  of  an  object.  If  you  click  on  any  drawn  object,  its 
nodes  will  appear.  You  can  change  an  object's  shape  in  this  way. 
The  Subselection  tool  is  also  used  to  adjust  the  length  or  angle  of 
straight  segments,  as  well  as  adjusting  slopes  or  curves.  The  short 
cut  for  the  subselection  tool  is  [A]  . 

2.1.3  Lasso  Tool 


Sometimes,  you  may  feel  the  need  to  only  select  a  part  of  an 
object,  and  not  the  object  as  a  whole.  In  such  cases,  you  use  the 
Lasso  Tool.  This  is  basically  a  free  hand  selection  tool.  Just  trace  the 
what  you  want  to  select  using  your  mouse,  and  to  close  the  selec- 
tion, just  double-click  your  mouse  on  the  point  you  started  the 
selection.  If  you  don't  reach  the  point  of  origin,  Flash  will  close  the 
selection  with  a  straight  line  from  where  you  are  to  the  point  of 
origin  when  you  double-click. 

You  can  also  use  the  Magic  Wand  Tool  and  the  Polygonal  Lasso 
Tool.  The  Magic  Wand  is  used  to  select  an  object  on  the  basis  of 
their  fill  colour.  If  you  click  on  a  particular  colour  in  an  object 
with  the  Magic  Wand  Tool,  all  other  areas  with  the  same  colour 
will  be  selected. 

You  can  tweak  the  Magic  Wand  settings  to  define  the 
Threshold  of  selection.  If  you  set  a  big  Threshold  value,  then  the 
colours  that  almost  match  your  choice  colour  will  also  be  selected. 

Another  selection  Tool  is  the  Polygonal  Lasso  Tool.  Here,  unlike 
the  Lasso  Tool,  you  don't  need  to  press  the  mouse  while  dragging. 
You  can  just  click  once  to  define  the  edges.  To  complete  the  selec- 
tion process  you  have  to  double-click.  The  shortcut  for  this  is  [  L  ]  . 


2.2  The  Drawing  Tools 


The  popular  Drawing  Tools  that  are  available  in  Flash  are  the  Pen 
Tool,  Line  Tool,  Rectangle  Tool  and  Pencil  tool. 


2.2.1  Pen  Tool 


The  Pen  Tool  is  used  to  create  vector  shapes.  All  you  need  is  to  click 
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on  the  stage  to  create  the  nodes  that  will  result  into  a  shape.  After 
the  basic  shape  is  drawn  with  the  Pen  tool,  the  subselection  Tool 
can  be  used  to  give  it  a  proper  shape.  While  drawing  with  the  Pen 
Tool  you  can  also  set  the  properties  from  Property  Inspector.  You 
can  set  the  stroke  style,  stroke  color  and  the  stroke  width. 

It  also  has  a  fly  out  Menu.  Here  you  can  get  more  options  such 
as  Add  Anchor  Point  E,  Delete  Anchor  Point  E  and  Convert  Anchor 
PointH.  If  you  need  an  extra  node  on  the  edge  of  a  shape  drawn 
with  the  Pen  Tool  all  you  have  to  do  is  just  to  click  on  the  position 
where  you  want  to  add  the  node  with  the  Add  Anchor  Point  tool. 
To  delete  an  unwanted  Anchor  point  you  have  to  choose  the  delete 
anchor  tool  and  click  on  the  node  which  you  want  to  delete.  The 
convert  Anchor  point  is  used  to  change  the  angle  and  the  curva- 
ture of  the  line  where  the  node  is  located. 


2.2.2  Line  Tool  L_l 

It  is  used  to  draw  straight  Lines.  Here  also  you  can  change  the 
properties  of  the  line  from  the  Properties  Inspector  Panel. 


2.2.3  The  Rectangle  Tool  LHJ 

This  tools  also  has  another  fly  out  as  its  submenu.  Here,  apart 
from  the  conventional  rectangle  shape  you  can  find  shapes  like 
Oval  Tool  0,  Rectangle  Primitive  Tool  H,  Oval  Primitive  Tool  and 
PolyStarTool  0.  The  name  of  the  Tools  clearly  explains  the  shape 
of  the  drawing.  By  using  the  Primitive  objects  you  can  adjust  the 
characteristics  of  graphic  shapes  in  the  Property  inspector.  You  can 
control  the  size,  corner  radius,  and  other  properties  of  the  shape 
at  any  time  you  want  even  after  you  have  created  it.  There  is  no 
need  to  re-draw  it  from  the  beginning.  In  Flash,  there  are  two  types 
of  primitive  objects— rectangles  and  ovals. 


2.2.4  Pencil  Tool  ifL 

It  is  basically  a  freehand  drawing  tool.  You  can  create  any  shape  in 
terms  of  lines  with  the  use  of  Pencil  Tool.  There  are  three  types  of 
modes  available  for  drawing  with  the  Pencil  Tool.  They  are 
Straighten,  Smooth  and  Ink.  Straighten  mode  automatically 
straightens  a  curved  line.  It  automatically  creates  the  nearest  geo- 
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metric  shape  like  triangle,  rectangle  oval  etc.  Smooth  mode 
smoothens  the  jerks  on  the  edges  and  Ink  mode  helps  in  freehand 
drawing. 

You  can  set  the  property  of  the  Pencil  tool  from  the  Property 
Inspector  and  define  your  desired  property  for  the  line. 


Straighten 

Smooth 

Ink 

Modes  of  Pencil  Tool 


2.3  The  Coloring  Tools 


After  you  draw  a  shape  in  Flash  you  can  color  it  using  the  differ- 
ent Coloring  Tools.  There  are  a  lot  of  coloring  tools  available  in 
Flash.  They  include  Brush  Tool,  Ink  Bottle  and  Paint  Bucket. 

2.3.1  Brush  Tool  \*_ 

It  can  be  used  just  like  you  use  brush  on  a  canvas.  You  can  paint  a 
shape  with  our  desired  colour  using  the  Brush  Tool.  Some  of  the 
options  that  are  available  with  Brush  Tool  are  Paint  Normal,  Paint 
Fills,  Paint  Behind,  Paint  Selection,  and  Paint  Inside.  These  are  also 
referred  as  Brush  Modes.  If  Paint  normal  is  selected  then  the  brush 
will  paint  where  ever  it  moves.  Paint  Fills  mode  only  colours  the 
fill  colour  leaving  the  stroke  colour  intact.  Paint  Behind  paints  the 


Modes  of  Brush  Tool 
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back  of  the  object.  Paint  selection  fills  a  particular  selected  area 
with  the  fill  colour.  Paint  Inside  is  used  to  colour  the  inner  part  of 
an  object.  The  shortcut  for  the  Brush  Tool  is  [B]  . 

2.3.2  ink  Bottle  fl> 


It  is  used  to  change  the  stroke  color,  width,  and  style  of  lines  or 
shape  outlines.  Gradients  or  Bitmaps  cannot  be  allotted  to  the 
stroke  color. 

You  can  select  multiple  strokes  and  can  change  the  color  just 
by  a  single  click. 

To  apply  a  different  property  to  the  stroke,  first  you  have  to  set 
the  attributes  from  the  Properties  Inspector.  Then  you  can  click  on 
the  line  of  the  drawn  object  using  the  Ink  Bottle  to  change  its  style. 

2.3.3  Paint  Bucket  \& 


It  is  useful  when  you  want  to  fill  an  object  with  some  color  in  a 
single  click.  The  Paint  Bucket  does  not  work  if  there  is  any  gap  in 
the  outline  of  an  object.  After  you  select  the  Paint  bucket,  you  will 
get  options  like  close  large  gaps,  close  medium  gaps  and  close 
small  gaps.  This  helps  in  detection  of  gaps  and  closing  it  so  that 
the  fill  color  is  applied  successfully. 

2.3.4  Eraser  Tool 


This  tool  helps  you  erasing  an  object  from  the  stage.  Here  as  well, 
you  get  sub  options  like  Erase  Normal,  Erase  Fills,  Erase  Lines, 
Erase  Selected  Fills,  Erase  Inside. 

Erase  Normal  erases  whereever  the  eraser  is  moved.  Erase  Fills 
only  erases  the  Fill  colors,  Erase  Lines  is  used  to  erase  the  strokes, 
Erase  Selected  Fills  helps  in  erasing  a  selected  portion  from  the 
Object  and  Erase  Inside  erases  the  inner  part  of  an  object. 


HSU  FAST  TRACK 


23 


THE  TOOL  BOX 


FLASH  CS3 


2.4  The  Transformation  Tools: 


Often  you  may  feel  to  transform  the  size  of  an  object  or  to  rotate 
it  a  bit.  For  all  these  purpose  the  Transforming  Tools  come  to  play. 
There  are  two  types  of  Transforming  Tools.  One  is  Free  Transform 
Tool  [Q]  H  and  the  other  is  Gradient  Transform  Tool  [f]  S. 

You  can  drag  the  handles  to  change  the  size.  If  you  place  your 
mouse  curser  just  outside  the  object,  the  rotate  icon  appears.  Now 
you  can  drag  the  mouse  to  rotate  it  clockwise  or  anti-clockwise. 
You  can  also  skew  a  shape  using  this  tool.  To  skew  a  shape  you  have 
to  place  your  mouse  cursor  just  on  the  border  in  between  the 
nodes.  A  bidirectional  parallel  arrow  appears.  Now  drag  either  way 
to  skew  the  shape. 


2.5  Eye  Dropper  Tool  [£. 


Eye  Dropper  Tool  is  very  useful  when  you  want  to  fill  an  object  with 
an  exact  color  that  you  have  used  for  another  object.  To  do  this,  just 
select  the  eye  dropper  tool  from  The  Tool  Palette.  Click  on  the  color 
you  want  to  select.  You  will  see  the  cursor  has  changed  to  a  'buck- 
et' like  symbol.  Now  click  on  the  new  shape  where  you  want  to  put 
the  color.  You  will  see  the  object  is  filled  with  the  same  color  from 
where  you  have  picked  up  the  shade  using  the  Eye  Dropper  Tool. 


2.6  Stroke  Color 


Stroke  Color  is  used  to  define  the  color  of  the  outline.  You  can 
select  the  outline  of  an  object  with  the  selection  Tool  and  choose 
any  color  from  the  stroke  color  to  apply  the  shade. 


2.7  Fill  Color 


You  can  fill  an  object  with  a  color  from  the  Fill  Color  option  avail- 
able in  Tool  Box.  You  can  fill  an  object  with  color,  gradient  shade 
or  a  bit  map.  To  change  the  shade  all  you  have  to  do  is  select  the 
Fill  Color  with  the  Selection  Tool.  Then  you  have  to  click  on  the  Fill 
Color  option  to  get  the  color  palette.  From  there  choose  the 
desired  color  or  the  gradient  shade  to  apply  it  to  the  object. 
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2.8  Snap  To  Objects  \K 


Snap  to  objects  finds  its  use  when  you  are  working  with  grids.  If 
you  turn  on  'Snap  to  Objects',  after  choosing  the  Selection  Tool, 
you  will  find  a  small  black  ring  appearing  under  the  pointer  as 
you  drag  an  element.  This  small  ring  changes  to  a  larger  ring 
when  the  object  is  in  close  vicinity  or  within  snapping  distance  of 
another  object. 


2.9  Zoom  Tool 


Some  times  while  working,  you  need  to  see  the  object  in  an 
enlarged  format.  You  can  select  the  Zoom  Tool  and  make  a  rec- 
tangular selection  around  the  object  to  magnify  it.  You  can  also 
click  on  a  particular  position  of  an  object  to  see  and  enlarged 
view.  The  Maximum  enlargement  you  can  achieve  using  the 
Zoom  Tool  in  Flash  CS3  is  2000  per  cent.  You  can  press  [Alt] 
and  click  with  your  Zoom  Tool  if  you  want  to  reduce  the  view. 
The  shortcut  of  Zoom  Tool  is  [M]  . 


2.10  Hand  Tool  ^ 


Hand  Tool  is  used  to  pan  an  object  on  the  stage.  You  can  navigate 
to  another  portion  of  an  object  in  magnified  form  using  the  Hand 
Tool.  If  you  double-click  on  the  Hand  Tool  the  zoomed  object  will 
be  reduced  and  will  fit  inside  your  window.  The  short  cut  for  the 
Hand  Tool  is  [H]  . 


2.11  Text  Tool  \l 


Text  Tool  is  used  to  type  on  the  screen.  Just  select  the  Text  Tool  and 
click  on  the  stage  to  get  the  typing  cursor.  You  may  change  the 
color  of  the  text  from  the  Properties  Inspector  after  selecting  the 
text  with  the  Text  Tool.  All  other  Text  Properties  that  you  find  in  a 
word  processing  software  like  font,  color,  font  size,  alignment  and 
others  are  available  in  Flash.  You  can  create  a  Text  box  by  dragging 
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the  Text  Tool  on  the  stage.  The  Text  box  can  be  set  to  contain  Static 
Text,  Input  Text  or  Dynamic  Text. 

Static  text  means  the  text  that  remains  unchanged  through 
out  the  presentation.  Dynamic  Text  changes  depending  on  the 
condition  set  by  the  developer.  Input  text  is  the  Text  box  where  the 
user  can  type  when  the  presentation  is  running. 
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□ 


Saving  A  File 

Before  anything  else,  you  need  to  know  how  to  save  Flash  files. 
And  no,  it's  not  as  simple  as  saving  a  file  in  any  other  software— 
you  have  to  know  your  formats,  what  settings  to  use  when  pub- 
lishing, and  sometimes,  very  importantly,  where  to  publish! 


3.1  Saving  a  file  in  FLA  format 


A  Flash  file  is  saved  with  .fla  extension.  There  are  three  major  com- 
ponents that  are  used  in  a  Flash  document.  They  are  Basic  Media, 
Timeline  and  ActionScript.  The  .fla  format  is  used  to  save  a  file 
with  all  these  components.  In  order  to  save  a  file  with  .fla  exten- 
sion, you  have  to  first  click  on  the  File  menu  and  then  choose  the 
Save  option  from  the  drop  down  menu.  A  dialog  box  will  appear, 
and  here  you  have  to  provide  a  file  name  and  location  for  saving 

the  file.  Choose  the  file 


Edit    View    Insert    Modify  Text 


New... 

Open... 

Browse... 

Open  from  Site. 

Open  Recent 

Close 

Close  All 


Ctrl+N 
Ctrl+O 
Ctrl+Alt+G 


Ctrl+W 
Ctrl+Alt+W 


Save  and  Compact 
Save  As... 
Save  as  Template... 
Check  In... 
Save  All 
Revert 
Save  option  in  File  Menu 


Ctrl+Shift+S 


type  as  .fla  and  then 
click  on  Save.  The  file 
would  be  saved  in  the 
.fla  format. 

The  fla  format  is  the 
format  of  the  raw  file. 
This  file  only  opens  with 
the  Flash  software  and  is 
version  dependent.  This 
means  if  you  create  a  file 
in  Flash  CS3  and  save  it 
in  the  same  version  then 
you  cannot  reopen  it  in 
any  lower  version.  This  is 
a  common  feature 
across  all  versions  of 
Flash. 
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3.2  Publishing  a  Movie 


A  flash  movie  can  be  considered  suc- 
cessful only  after  others  have  viewed 
it  on  the  Web.  In  order  to  do  this, 
you  need  to  publish  the  movie. 
There  are  some  steps  to  be  followed 
in  order  to  publish  a  Flash  Movie. 

The  first  step  in  publishing  a 
movie  is  to  share  it.  For  this,  the 
component  parts  required  consists 
of  a  SWF  file,  a  Web  page  and  a  host- 
ing account  for  the  Web.  Flash 
movies  are  saved  in  .swf  format  in 
two  ways.  We  can  publish  the  file  or 
can  export  it.  To  Publish  a  Flash  file 
to  SWF  click  on  File  >  Publish. 

From  the  option  Publish  Settings 
you  can  define  the  file  types  you 
want  to  publish. 

Here  you  can  set  your  publishing 
preferences.  These  preferences  are 
in  respect  to  the  File  Types.  The 
main  publishing  Formats  are  as  fol- 
lows: 


9  Edit    View    Insert    Modify  Text 

New. , . 

Ctrl+N 

Open, , , 

Ctrl+O 

Browse. , . 

Ctrl+Alt+O 

Open  from  Site... 

Open  Recent 

► 

Close 

Ctrl+W 

Close  All 

Ctrl+Alt+W 

Save 

Ctrl+S 

Save  and  Compact 

Save  As... 

Ctrl+Shift+S 

Save  as  Template... 

Check  In... 

Save  All 

Revert 

Import 

► 

Export 

► 

Publish  Settings... 

Ctrl+Shift+F12 

Publish  Preview 

► 

Publish 

Shift+F12  | 

Page  Setup... 

Print... 

Ctrl+P 

Send.,. 

Edit  Sites... 

Exit 

Ctrl+Q 

Publish  option  in  File  Menu 


Flash  —  .swf 

Html  -  .html 

Jpeg  -  jpg 

GIF  -  .gif 

PNG  -  .png 
Windows  Projector  Macintosh  Projector 

and  others  —  .exe 


Apart  from  these  there  are  two  other  Tabs.  These  are  settings 
for  Flash  and  HTML.  In  Publish  settings  you  will  get  a  button 
called  "Publish".  After  you  choose  your  desired  settings  if  you 
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9  Edit    View    Insert    Modify  Text 

New,.. 

Ctrl+N 

Open,,, 

Ctrl+O 

Browse,., 

Ctrl+Alt+O 

Open  from  Site... 

Open  Recent 

► 

Close 

Ctrl+W 

Close  All 

Ctrl+Alt+W 

Save 

Ctrl+S 

Save  and  Compact 

Save  As... 

Ctrl+Shift+S 

Save  as  Template.. 

Check  In... 

Save  All 

Revert 

Import 

► 

Export 

Publish  Settings... 

Ctrl+Shift+F12 

Publish  Preview 

► 

Publish 

Shift+F12 

Page  Setup.,, 

Print... 

Ctrl+P 

Send,., 

Edit  Sites... 

Exit 

Ctrl+Q 

Publish  Settings  option  in  File 
Menu 


Formats  [Flash  HTML 


Type: 

□  Flash  (.swf) 

□  HTML  (.html) 

□  GIF  Image  (.giF) 

□  JPEG  Image  (.jpg) 

□  PNG  Image  (.png) 
Windows  Projector  (.exe) 
Macintosh  Projector 

,:  ;' '  •::     .  Flash  'r»  s.  (,n 


,      ;  t.htrf 


.  nfci  ed  .  "  3V 


]E5 
]0 

]0 

]0 
]0 


Usii  )ef  sul  Name; 


Publish  settings  dialog  box 

click  on  Publish  then  your  anima- 
tion file  will  be  published  in  your 
desired  mode. 

Another  way  you  can  save  in  .swf 


format  is  by  exporting  the  Flash  Movie. 

3.3  Exporting  a  Movie 


A  flash  movie  after  being  made  is  saved  with  a  .fla  extension. 
However,  when  a  flash  movie  is  exported,  a  new  .swf  file  is  created. 

A  Flash  movie  can  be  easily  exported  by  following  certain  steps. 
For  this,  click  on  the  File  menu  and  click  on  Open  option  from  the 
drop-down  menu.  Now,  select  the  flash  movie  that  is  already  created. 

Again  click  on  the  File  menu.  This  time,  choose  the  Export 
Movie  option  from  the  drop  down  menu.  The  Export  Movie  dialog 
box  opens.  In  this  dialog  box,  provide  a  name  for  the  file  and  spec- 
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New... 

Ctrl+N 

Open... 

Ctrl+O 

Browse... 

Ctrl+Alt+O 

Open  from  Site... 

Open  Recent 

► 

Close 

Ctrl+W 

Close  All 

Ctrl+Alt+W 

Open  option  in  File  menu 


ify  the  location  for  saving  the  file.  Save  the  file  with  .swf  extension 
and  click  on  Save. 

The  flash  movies  can  also  be  exported  in  .avi,  .mov  and  other 
formats.  After  you  create  an  animation  in  Flash  you  can  export  it 
as  a  video  file.  This  can  be  imported  to  any  video  editing  software 
like  Adobe  Premiere  and  editing  can  be  done. 


Edit    View    Insert    Modify  Text 


New... 

Ctrl+N 

Open,.. 

Ctrl+O 

Browse... 

Ctrl+Alt+O 

Open  from  5ite... 

Open  Recent 

Close 

Ctrl+W 

Close  All 

Ctrl+Alt+W 

Export  Movie  option  in  File 

Save 

Ctrl+S 

Menu 

Save  and  Compact 

5ave  As... 

Ctrl+Shift+S 

Save  as  Template.., 

Check  In.,. 

Save  All 

Revert 

Import  ► 

Export  Image.., 

Publish  Settings.., 

Ctrl+Shift+F12  I! 

Export  Movie.,.   Ctrl+Alt+5hift+S  | 
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However,  you  need  to  remember  that  when  exporting  a  Flash 
file  to  a  video  format,  Movie  Clips  and  Action  Scripts  do  not  work. 
So  if  you  think  of  creating  a  video  file  from  Flash  always  try  to 
avoid  using  Movie  Clips  and  Action  Scripts. 


3.4  Version  Control 


It  is  always  advisable  to  maintain  a  consistency  in  Nomenclature 
while  you  are  saving  a  Flash  File.  This  is  more  important  when  you 
are  saving  multiple  versions  of  a  single  file. 

Not  all  of  us  have  an  updated  version  of  the  software.  So  if  you 
save  your  animation  in  a  higher  version  it  will  never  open  in  any 
lower  version.  So  it  is  always  advisable  to  save  multiple  copies  of 
the  file  in  multiple  versions.  Flash  provides  you  with  the  feature 
to  save  as  a  lower  version  FLA  file. 


HM3  FAST  TRACK 


31 


IV 


CREATING  SYMBOLS 


FLASH  CS3 


Creating  Symbols 

Here's  where  it  all  starts  to  get  exciting,  interesting  and  com- 
plicated even.  When  working  with  objects,  you  can  make 
them  into  symbols.  Graphics,  buttons  and  movie  clips  are 
examples  of  Symbols 

4.1  Different  Types  Of  Symbols 


There  are  mainly  three  types  of  symbols  available  in  Flash  CS3. 
These  are  Graphic,  Button  and  Movie  Clip  symbols.  Each  symbol 
has  got  a  unique  Timeline  and  Stage.  These  symbols  can  be  applied 
many  a  times  in  a  document,  or  even  in  other  documents. 

Graphic  symbols  E  are  used  for  static  images.  Another  impor- 
tant usage  of  Graphic  symbol  is  to  create  reusable  pieces  of  anima- 
tion that  are  linked  to  the  main  Timeline.  In  comparison  to  buttons 
and  Movie  Clips,  Graphic  symbols  contribute  very  little  to  the  flash 
file  size  as  they  usually  don't  have  a  timeline  with  animation  as 
such.  These  symbol  functions  in  sync  with  the  main  Timeline. 

Button  symbols  Ej  on  the  other  hand  are  mainly  used  to  create 
interactive  movies.  These  buttons  respond  to  mouse  clicks, 
rollovers  and  other  actions. 

Buttons  have  4  stages.  These  are  Up,  Over,  Down  and  Hit. 


*  a  □ 

Up  Over 

Down|_H 

T  Layer  1             *  * 

□ 

• 

• 

• 

■ 

J 

Button  States 


Now  let  us  discuss  these  steps  one  by  one. 

Up  State:  This  is  the  stage  when  the  cursor  is  away  from  the 
button.  The  appearance  of  a  button  when  placed  on  the  screen  is 
the  Up  State. 

Over  State:  When  the  mouse  cursor  is  placed  over  the  button  the 
appearance  of  the  button  can  change.  This  is  referred  as  Over  State 
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Down  State:  Down  State  defines  the  appearance  of  the  button 
when  it  is  clicked. 

Hit  Area:  Hit  area  is  the  active  part  of  the  button.  Your  button 
may  physically  occupy  a  small  area  but  if  the  Hit  Area  is  big  then 
the  active  part  of  the  button  will  also  be  large. 

Movie  Clip  symbols  El  are  also  used  to  produce  reusable  pieces 
of  animation.  They  have  their  own  multi-frame  and  multi-layer 
timeline.  This  Timeline  is  not  attached  to  the  main  Timeline  of 
the  scene.  This  Timeline  may  be  thought  of  as  a  separate  anima- 
tion, which  can  be  included  within  the  main  scene. 

Movie  Clips  basically  help  to  create  an  animation  within  anoth- 
er animation.  Let's  take  an  example  to  understand  the  use  of  a 
movie  clip.  Suppose  you  are  trying  to  create  a  flying  bird  in  Flash. 


Now  if  you  consider  the  flying  pattern  you  will  definitely 
observe  that  basically  there  are  two  motions.  One  motion  is  the 
flapping  of  wings  and  the  other  is  the  movement  of  the  whole 
body.  So  we  can  see  in  terms  of  animation  that  there  is  wing  ani- 
mation inside  the  flying  animation.  Now  these  two  animations 
cannot  be  developed  in  the  same  scene.  Here  the  concept  of  Movie 
Clip  comes  into  play.  To  create  an  animation  of  a  flying  bird  first 
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we  have  to  create  a  Movie  Clip  where  we  will  only  show  the  flap- 
ping of  wings. 


lr>"'M:d  .  1 


a  □  i    s  io 

1        20        25        30        35        40        45        50        55        60        65        70        75  81 

A  movie  clip  to  create  flapping  wings 

This  Movie  Clip  can  be  attached  to  the  body  in  the  main  scene 
and  the  whole  body  along  with  the  animated  flapping  wings  can 
be  put  in  to  motion. 


tt  Untitled-2*  { 


*  a  □  i    5    ^  io  ij 


20        25        30        35        40        45        50        55        60        65  7 


t  16     12.0  Pps      1.3s  _ 
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wingl  wing2 
Movie  Clip     Movie  Clip 


The  main  scene 
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The  bird  will  then  fly  moving  the  wings,  just  as  you  see  in  your 
every  day  life.  Movie  Clip  also  helps  us  to  play  an  animation  with- 
in a  Loop.  Again  to  create  animated  buttons  these  Movie  clips 
instances  can  be  put  inside  the  Timeline  of  a  Button  symbol.  The 
Movie  clips  are  scriptable  with  Action  Script. 

4.2  Instance  Name  and  Library 


Instance  Name 

Instance  Names  are  the  names  which  we  can  assign  to  movie  clips 
and  buttons.  Instance  names  are  very  useful  when  we  are  using 
ActionScripts.  Generally,  a  movie  clip  or  a  button  is  referred  to  in 
the  ActionScript  by  an  Instance  Name.  This  can  be  set  from  the 
Properties  Inspector  Panel.  It  is  wise  to  put  an  instance  name  after 
you  create  a  Button  or  a  Movie  Clip.  You  never  know  when  you  may 
require  to  call  a  symbol  while  using  scripts. 

Library 


The  Library  is  basically  the  store 
house  of  symbols  from  where  they 
are  used  throughout  the  movie. 
When  you  need  multiple 
instances  of  the  symbols,  you  can 
just  drag  them  from  the  library  to 
any  part  of  the  movie  you  want. 
You  can  also  use  the  symbols  of 
one  movie  in  another  movie  as  an 
external  Library.  If  you  delete  a 
symbol  from  the  stage,  the  symbol 
remains  in  the  Library  and  can  be 
used  again  when  needed.  Deleting 
symbols  from  the  library  results 
permanent  deletion  though. 

You  cannot  edit  a  symbol  on 
stage.  So  if  you  want  to  edit  a  sym- 


J  Library  X  |  

X 

|  Untitled-2 
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> 

bol,  you  need  to  refer  to  the  Symbols  in  the  Library 
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library.  From  the  Library  panel,  right-click  on  the  symbol  and 
choose  edit  to  go  to  the  time  line  of  the  symbol. 

4.3  Create  A  Simple  Graphic  Symbol 

Graphics  symbols  are  mainly  used  for  the  purpose  of  creating 
animations  and  static  images.  To  create  a  Graphic  Symbol  follow 
these  steps: 

1.  Draw  a  shape  on  the  stage  using  the  drawing  Tools  or  import 
bitmaps  onto  the  stage  by  pressing  [Ctrl]   +   [R]  . 

2.  Select  the  object  and  press  [F8]  or  choose  Modify  >  Convert 
to  Symbol . 

3.  Now  when  the  object  is  selected  choose  the  Graphic  Behavior 
and  name  the  symbol  as  per  your  choice. 

4.  You  can  edit  the  symbol  later  on  either  by  double-clicking  on  it 
in  the  library,  or  right-clicking  and  choosing  Edit. 

5.  The  name  of  the  symbol  will  automatically  appear  beside  the 
scene  name. 

6.  Here  you  can  edit  the  properties  of  a  graphic  symbol. 

7.  If  you  want  to  exit  from  the  symbol  editing  mode  then  click  on 
'Scene  V 

8.  This  helps  you  to  go  back  to  view  the  main  movie's  timeline. 

4.4  Create  A  Simple  Button 


Buttons  are  a  special  type  of  symbol  that  contain  4  frames:  Up, 
Over,  Down  and  Hit.  These  frames  symbolize  varied  states  for  the 
button.  To  create  a  simple  button  follows  the  steps: 

1.  To  create  a  button,  select  an  object  on  the  stage. 

2.  Select  Modify  >  Convert  To  Symbol  or  press  [F8]  . 

3.  Select  Button  and  click  OK. 

4.  Now  right-click  on  the  symbol  and  choose  edit. 

5.  Notice  Flash  shifts  to  symbol-editing  mode  where  the  Timeline 
header  changes  to  show  four  frames  Up,  Over,  Down  and  Hit  as 
we  have  discussed  above.  The  first  frame  i.e.  Up  is  a  blank 
keyframe. 
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6.  Select  the  second  frame  i.e.  the  Over  State  and  go  to  Insert  > 
Keyframe.  Here  you  can  change  the  properties  as  per  your 
choice.  This  will  enable  the  button  to  get  a  new  look  when  the 
mouse  cursor  will  be  placed  above  the  button. 

7.  Now  change  the  button  properties  for  the  Over  State  by  the 
same  process. 

8.  Repeat  the  same  process  for  Down  State  also 

9.  Give  a  specific  Hit  Area 

10.  Now  come  to  the  initial  flash  screen  by  clicking  the  scene  1 
tab. 

4.5  Create  a  movie  clip 


Movie  clip  symbols  are  Flash  movies  inside  a  Flash  movie.  These 
symbols  are  reusable  pieces  of  Flash  animations  that  comprise  of 
one  or  more  graphic  or  button  symbols.  To  create  a  Movie  clip  fol- 
low these  steps: 

1.  Import  bitmaps  on  to  the  stage  by  pressing  [Ctrl]    +    [R]  or 
from  File  >  Import  >  Import  to  stage 

2.  You  can  also  draw  an  object  if  you  like 

3.  Select  the  object  with  the  mouse. 

4.  Choose  Modify  >  Convert  to  Symbol  or  press  [F8]  . 

5.  Select  the  Movie  clip  Behavior  and  name  it  as  "mc_pic". 

6.  Move  your  mouse  over  mc_pic  and  double-click  to  shift  it  to  sym- 
bol-editing mode. 

7.  Create  an  animation  sequence  by  using  either  Tweened  anima- 
tion or  Frame  by  Frame  animation. 

8.  Click  on  Scene  1  and  exit  from  the  symbol  editing  mode. 

9.  Your  Movie  clip  is  ready;  to  view  it  press  [Ctrl ]   +   [Enter]  . 
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4.6  Assign  an  Instance  Name  to  A  Movie  Clip 


After  a  Movie  Clip  is  created  we  should  assign  an  instance  name  to 
it.  Instance  names  are  very  useful  when  we  attach  Action  Scripts 
to  it.  Instance  name  and  symbol  names  are  different.  When  you 
define  a  symbol,  the  following  dialog  box  appears: 


Convert  to  Symbol 

m 

Name:  OK 

lype:  O  Movie  clip          Registration:  ggg 
O  Button 
©  Graphic 

Cancel 
Advanced 

Convert  To  Symbol  Dialog  Box 


This  is  to  assign  a  name  to  the  symbol,  and  has  nothing  to  do 
with  instance  names. 

After  a  movie  clip  is  created  you  can  assign  the  instance  name 
from  the  Properties  Inspector. 


1  .— -.    Movie  Clip           v    Instance  of:  Symbol  3 

Color;  |rJone 

© 
® 

|.L=J   F<1                !>  |  [swap...  | 

W;[268,9  |x:|~14i!i~| 

© 

□  Use  runtime  bitmap  caching 

Setting  an  instance  name 


4.7  Blend  Modes  and  Colors 


4.7.1  Color 

The  Color  option  in  Flash  helps  in  changing  the  color  and  trans- 
parency of  an  instance.  Every  instance  of  a  symbol  has  its  respective 
color  effect.  The  color  and  transparency  options  for  instances  is  set 
from  the  Property  Inspector.  All  the  changes  made  in  the  Property 
Inspector  affect  the  bitmaps  which  are  present  in  the  symbols. 

If  any  change  is  made  in  the  colour  and  transparency  of  an 
object  in  a  particular  frame,  then  that  change  is  instantly  noted  by 
Flash.  As  soon  as  that  particular  frame  is  dispalyed,  Flash  makes  it 
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a  point  to  note  the  change.  It  is  better  to  apply  a  motion  Tween  in 
case  a  gradual  change  is  required.  If  it  is  needed  to  Tween  the 
color,  then  different  effect  settings  needs  to  be  entered  in  the 
beginning  and  ending  keyframes  of  an  instance.  After  this  is  done, 
the  settings  are  Tweened.  This  makes  the  color  of  the  instance 
change  with  time. 

When  a  color  effect  is  applied  to  a  movie  clip  symbol  including 
multiple  frames,  then  the  effect  is  uniformly  applied  to  each  and 
every  frame  in  that  particular  movie  clip  symbol.  To  apply  color 
effect  on  a  movie  clip  symbol,  follow  these  steps: 

1.  First,  you  have  to  select  an  instance  on  the  stage. 

2.  Click  on  the  Windows  menu. 

3.  Click  on  Properties  and  then  again  Properties  from  the  drop 
down  menu. 

4.  Once  the  Properties  Inspector  opens,  you  will  see  that  the  Color 
option  is  available  there. 

5.  Click  on  the  Color  menu. 

6.  Choose  your  desired  Color  mode  from  the  drop-down  menu. 

There  are  several  options  available  under  Color  menu  in  Flash. 
They  are  Brightness,  Tint,  Alpha  and  Advanced. 
Brightness:  The  relative  amount  of  lightness  and  darkness  of  the 
image  is  decided  by  the  Brightness  option  available  under  the 
Color  menu.  The  value  of  Brightness  varies  from  Black  which  is  0% 
to  white  which  is  100%.  The  brightness  value  can  either  be  adjust- 
ed by  clicking  the  down  arrow  and  dragging  the  slider  or  by  put- 
ting a  value  in  the  box. 


Color: 

Brightness 

100°/< 

H 

Brightness  Color  Option 


Tint:  If  we  apply  Tint  property  on  an  object,  then  the  object  gets  col- 
ored with  the  same  hue.  The  percentage  of  Tint  varies  from  transpar- 
ent which  is  0%  to  saturated  which  is  100%.  The  percentage  of  Tint  to 
be  applied  on  the  object  can  be  determined  by  using  the  Tint  Slider. 
The  Tint  Slider  is  present  in  the  Property  Inspector.  In  order  to  adjust 


HEH  FAST  TRACK 


39 


IV 


CREATING  SYMBOLS 


FLASH  CS3 


the  Tint,  you  can  click  the  triangle  and  then  drag  the  slider.  Another 
way  of  adjusting  the  Tint  is  by  entering  a  value  in  the  box. 

If  a  color  is  to  be  selected,  then  different  values  for  Red,  Green 
and  Blue  has  to  be  entered  in  the  respective  boxes.  Another  way 
that  can  be  followed  is  to  open  the  Color  Picker  and  choosing  a 
color  from  there.  The  Color  Picker  can  be  opened  by  clicking  the 
Color  Control. 


Color:  I  Tint 


50% 

V 

RGB: 


255 


255 


255 


Tint  Color  option 


Alpha:  If  the  transparency  of  an  instance  needs  to  be  adjusted,  then 
the  Alpha  property  is  to  be  applied.  The  value  of  Alpha  varies  from 
transparent  which  is  0%,  to  fully  saturated  which  is  100%.  In  order  to 
adjust  the  Alpha,  you  can  click  the  arrow  and  then  drag  the  slider. 


Color: 

Alpha  1 

1007c 

H 

Alpha  Color  Option 


Advanced:  At  times  it  may  be  required  to  adjust  the  value  for 
transparency  and  the  respective  colors,  that  is  red,  green  and 
blue  of  an  instance  separately.  It  is  in  such  cases  that  the 
Advanced  option  can  be  used  from  the  Color  menu.  By  using  the 
Advanced  option,  it  often  becomes  easier  to  create  and  animate 
color  effects  on  bitmap  objects.  In  order  to  set  the  values  for  the 
Advanced  effect,  click  on  Settings  after  selecting  it  under  the 
Color  menu.  In  the  Advanced  effect  dialog  box,  use  the  controls 
on  the  left  if  the  transparency  or  the  color  value  has  to  be 
decreased  by  a  certain  percentage.  The  controls  on  the  right  are 
used  to  either  increase  or  decrease  the  transparency  or  the  color 
values  by  a  constant  amount. 
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When  the  values  are  entered  for  the  respective  colors,  red, 
green  and  blue  and  the  Alpha  value  in  the  Advanced  effect  dialog 
box,  then  the  values  are  first  multiplied  by  the  percentage  values. 
The  values  are  then  added  to  the  constant  values  present  in  the 
right  column.  After  this  is  done,  the  new  color  values  are  created. 
Let's  take  an  example.  Say  the  current  value  for  the  color  blue  is 
100.  Now  using  the  slider,  the  value  in  the  left  column  is  given  as 
50%.  The  value  in  the  right  column  is  input  as  100%.  The  new  color 
value  that  is  produced  is  150. 

The  calculation  can  be  shown  as:  ( {  100x.5}  +100  =  150). 

The  color  of  an  instance  can  also  be  changed  by  using  the 
Action  Script  Color  Transform  object. 

Now  let  us  see  how  we  can  create  animations  using  this  color 
menu. 

1.  Let  us  consider  a  bitmap  image  on  your  screen. 

2.  Click  on  the  image  to  select  it  and  press  [F8  ]  . 


Advanced  Effect 


Red  =  ( 
Green  = ( 

Blue=  ( 
Alpha  =  ( 


100% 


100% 


100% 


100% 


v  x  R)  + 

v  xG)  + 

v  xB)  + 

v  xA)  + 


OK 


v 


Cancel 


Advanced  Effect  Dialog  box 
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3.  A  dialog  box  appears. 

4.  Choose  Graphics  option  and  click  OK. 

5.  Now  at  50th  frame  and  a  Key  frame. 

6.  Return  to  the  1st  key  frame. 

7.  From  the  Properiies  Inspector  dialog  box  choose  Alpha  from 
color  menu. 

8.  Set  the  value  of  Alpha  to  0. 

9.  How  ever  the  value  of  Alpha  for  the  last  keyframe  should  be  kept 
to  100. 

10.  Now  click  on  the  layer  to  select  the  timeline  in  between 
keyframes. 

11.  Right-click  on  the  selection  and  choose  Create  motion  Tween. 

12.  Press  [Ctrl]   +   [Enter]  to  see  the  preview. 

13.  You  will  find  the  image  gradually  becomes  visible. 

4.7.2  Blend  Modes 

Blend  Modes  in  Flash  helps  in  creating  composite  images. 
Compositing  means  the  way  by  which  the  transparency  or  color 
interaction  of  two  or  more  objects  that  are  overlapped  varies  consid- 
erably. By  using  the  blend  modes,  unique  effects  can  be  created.  The 
effects  can  be  created  in  two  ways. 

•  Different  colors  blend  in  overlap- 
ping movie  clips  to  create  the  effects. 

•  A  dimension  of  control  is  added  to 
the  opacity  of  images  and  objects. 

The  blend  modes  in  Flash  serve  a 
number  of  other  purposes  too.  The 
blend  modes  are  useful  in  highligh- 
lighting  the  details  of  an  underlying 
image  by  creating  either  shadows  or 
highlights.  A  desaturated  image  can 
also  be  made  colorful  by  applying 
blend  modes. 

There  are  different  elements  that  a 
blending  mode  consists.  They  are 
Blend  Color,  Opacity,  Base  Color  and 
the  Result  Color.  Blend  Modes 


Layer 

Darken 

Multiply 

Lighten 

Screen 

Overlay 

Hard  Light 

Add 

Subtract 

Difference 

Color: 

Invert 

Alpha 

Erase 

Blend: 

Normal  v 

1  1  Use  runtime  bitmap  caching 
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Blend  Color  can  be  defined  as  the  color  which  is  applied  to  the 
blend  mode. 

A  blend  mode  has  some  degree  of  transparency.  This  is  known 
as  the  Opacity  of  the  Blend  Mode. 

Base  Color  stands  for  the  color  of  pixels  present  beneath  the 
blend  color. 

The  resultant  color  on  the  base  color  due  to  the  blend  effect  is 
known  as  the  Result  Color. 

Two  things  should  be  remembered  while  applying  blend  mode 
on  any  object  in  Flash.  The  two  things  that  matter  is  the  color  of 
the  object  and  the  underlying  color.  It  is  very  essential  to  under- 
stand the  nature  of  these  two  colors  in  order  to  create  the  right 
effect.  For  this  it  is  necessary  to  experiment  with  the  various  types 
of  Blend  modes  that  are  available  in  Flash. 

Types  of  Blend  Modes 

The  various  blend  modes  that  can  be  applied  are: 


Normal:  This 
blend  mode  helps  in 
applying  color  nor- 
mally. The  base  colors 
do  not  interact  in  the 
process  of  application. 

Layer:  The  blend- 
ing of  color  takes 
place  normally  in  this 


Blend: 

Normal  v 

Darken  type  under  blend  mode 

Blend: 

blend     mode     too.  Darken  type  under  blend  mode 

However,  the  blend  object  is  pre  composited  at  an  opacity  of  100% 
before  the  blending  takes  place.  By  doing  this,  the  subclips  of  the 
blend  object  are  restricted  from  blending  through  one  another. 


Darken:  This  blend 
mode  is  used  to 
replace  certain  areas 


Blend: 

Darken  | 

V 

which  are  compara-  Darken  type  under  blend  mode 
tively  lighter  than  the 

blend  color.  The  areas  which  are  darker  than  the  blend  color, 
remains  unchanged. 
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Blend: 

Multiply  I 

Multiply:  The  multiply  blend  mode  in  flash  helps  in  creating 

more  darker  colors. 
This  is  done  by  multi- 
plying the  base  color 
by  the  blend  color. 

Lighten:  Lighten 
blend  mode  helps  in 
the  replacement  of 
only  those  pixels 
which  are  darker  than 


Multiply  type  under  blend  mode 


Blend: 


Lighten 


Lighten  type  under  blend  mode 


Blend: 

Screen 

V 

Screen  type  blend  mode 


the  blend  color.  Areas  which  are  lighter  compared  to  the  blend 
color  remains  unchanged. 

Screen:  The  use  of  this  blend  mode  in  Flash  helps  in  creating  a 

bleaching  effect.  This 
is  done  by  multiplying 
the  inverse  of  the 
blend  color  by  the 
base  color. 

Overlay:  This  blend  mode  in  Flash  multiplies  or  screens  the 

colors.  The  multiply- 
ing or  screening  of  the 
colors  however 
depends  on  the  base 
colors. 

Hard  Light:  The  Hard  Light  Blend  mode  in  Flash  is  useful  in 

multiplying  or  screen- 
ing the  colors.  The 
multiplying  or  screen- 
ing of  the  colors  how- 
ever depends  on  the 
blend  mode  color.  The  effect  created  by  using  this  blend  mode 
resembles  that  of  a  spotlight  shining  over  an  object. 

Difference:  The  difference  blend  mode  helps  in  subtracting 

the  blend  color  from 


Blend: 

Overlay  I 

Overlay  type  under  blend  mode 


Blend: 


Hard  Light 


Hard  type  under  blend  mode 


Blend: 


Difference  type  under  blend  mode 


the  base  color  or  just 
the  opposite.  The  sub- 
traction however 
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depends  upon  the  greater  brightness  value  of  either  the  blend 
color  or  the  base  color.  The  effect  that  is  created  is  similar  to  that 
of  a  color  negative. 

Invert:  This  blend 
mode  can  be  used  in 
Flash  to  invert  the 
base  color. 

Alpha:  This  blend 
mode  helps  in  apply- 
ing an  alpha  mask  in 
Flash. 

Erase:  The  Erase 
blend  mode  can  be 
used  to  remove  all  the 
base  color  pixels.  This 
blending  mode  can 


Blend: 

Invert 

V 

Invert  type  under  blend  mode 

Blend: 

Alpha 

V 

Alpha  type  under  blend  mode 

Blend:  | 

Erase 

v 

Erase  type  under  blend  mode 


also  be  used  to  remove  the  pixels  present  in  the  background  image. 

It  should  however  be  noted  that  the  Erase  and  Alpha  blend 
modes  can  only  be  applied  to  a  parent  movie  clip  if  a  blend  mode 
apart  from  Normal  is  already  applied  on  it. 

It  is  very  easy  to  apply  blend  mode  to  a  movie  clip  in  Flash.  The 
blend  modes  in  Flash  can  be  applied  from  the  Properties  Inspector. 
This  can  be  done  by  following  certain  simple  steps  in  Flash. 

1.  First,  select  the  movie  clip  instance  present  on  the  Stage. 

2.  Now,  make  adjustments  in  the  transparency  and  color  values  of 
the  movie  clip  instance. 

3.  This  can  be  done  from  the  Color  menu  in  the  Properties 
Inspector. 

4.  In  the  Properties  Inspector,  clcik  on  the  Blend  option. 

5.  From  the  drop  down  menu,  choose  the  desired  blend  mode 
option. 

6.  The  blend  mode  gets  applied  on  the  movie  clip  instance.  The 
change  can  be  seen  instantly. 

However,  the  correct  type  of  blend  mode  should  be  chosen  so 
that  it  matches  the  effect  perfectly. 
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Simple  Animation 

Now  we  get  to  the  point  where  we  will  show  you  how  to  go 
about  creating  simple  animations  in  Flash  CS3.  After  all,  the 
whole  point  of  using  Flash  is  to  learn  how  to  create  those 
mindblowing  animations  taht  you  se  online. 

5.1  Frame  By  Frame  Animation 


When  a  series  of  images  appears  at  an  interval  of  time,  then  it 
appears  to  show  some  movement.  This  can  be  termed  as  anima- 
tion. Such  animations  can  be  created  in  Flash  too.  Animations  in 
Flash  are  created  with  the  help  of  frames.  Frames  in  Flash  can  be 
defined  as  the  little  rectangular  cells  which  appear  on  the 
Timeline. 


In                ^  a  □[ 

5          10        15        20        25        30        35        40        45        50        55  60 

iJ  Layer  1 

t  □□£][■] 

1      12.0  Fps      0.0s      <  I 

Timeline  of  a  Frame  by  Frame  Animation 


Key  Frames  are  special  types  of  frames  where  we  can  attribute 
some  change  like  position,  color,  shape,  etc. 

Keyframes  can 
be  of  two  types.  If 
a  Keyframe  has 
content  in  it,  then 
it  is  represented 
by  a  circle.  An 
empty  circle  pre- 
ceded by  a 
keyframe  denotes 
that  it  is  an  empty 
keyframe. 


Two  types  of  Keyframes 
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In  order  to  create  an  animation,  the  changes  are  needed  to  be 
registered  in  keyframes.  While  creating  a  Frame  by  Frame  anima- 
tion, every  individual  frame  is  treated  as  a  keyframe.  Frame  by 
Frame  animation  plays  an  important  role  in  creating  complex  ani- 
mations. 

All  animations  are  not  simple.  Complex  animations  are  gener- 
ally larger  in  size.  This  is  because,  while  making  these  animations, 
the  contents  with  which  we  are  working  on  the  Stage  tend  to 
change  in  individual  frames.  In  such  animations,  the  movement 
of  image  across  the  stage  is  restricted.  Instead,  the  image  changes 
in  respective  frames.  In  this  type  of  animation,  a  complete  frame 
generally  has  some  value.  The  values  for  the  complete  frames  are 
stored  by  Flash. 

A  Frame  by  Frame  Animation  can  be  easily  created  by  following 
certain  steps. 

At  the  very  beginning,  individual  frames  are  to  be  treated  as 
single  keyframes.  At  the  same  time,  creating  separate  images  for 
respective  frames  is  necessary. 

1.  To  begin,  make  a  layer  active  by  clicking  on  it. 

2.  Now,  on  the  layer,  select  a  frame.  The  animation  will  begin  from 
this  particular  frame. 

3.  The  first  frame  is  a  keyframe  by  default. 


11      5          10  IE 
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4.  If  the  keyframe  is  deleted  from  the  1st  frame  then  choose 
Insert  >  Timeline  and  then  Keyframe  option  from  the  drop 
down  menu. 


1  Modify    lext    Commands    Control    Debug  Window 

New  Symbol. Ctrl+F8 

1  Timeline 

■ 

Layer 

Timeline  Effects 

Layer  Folder 

Scene 

Motion  Guide 

Frame  F5 

Keyframe 

Blank  Keyframe 

Create  Motion  Tween 

— 1  Tf 

Create  Shape  Tween 

Keyframe  option  in  the  Insert  Menu 


5.  After  this  is  done,  the  artwork  needs  to  be  specified.  There  is  a 
sequence  to  be  followed.  So  the  artwork  will  be  specified  for  the 
very  first  frame. 

6.  The  artwork  may  be  created  by  using  the  various  drawing  tools. 
The  use  of  graphics  can  also  be  made. 

7.  At  times,  addition  of  a  new  keyframe  is  required.  This  new 
keyframe  will  contain  identical  content  present  in  the  first 
keyframe. 

8.  This  can  be  done  by  clicking  on  the  next  frame  in  the  right. 
However,  the  row  has  to  be  same. 

9.  Next,  click  on  Insert  menu.  Choose  Timeline  and  then  Keyframe 
from  the  drop  down  menu. 

10.  The  next  part  of  the  animation  can  also  be  created  easily.  The 
only  thing  that  needs  to  be  changed  on  the  stage  is  the  content 
of  the  particular  frame.  We  can  also  change  the  position,  shape 
color  and  other  properties  in  each  of  the  keyframes. 

11.  The  complete  sequence  can  be  achieved  by  repeating  the  above 
steps. 
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12.  Once  the  frame  by  frame  animation  is  created,  you  can  test  it 
by  clicking  Control  >  Play. 

13.  This  is  called  frame  by  frame  animation. 

5.2  Develop  A  Simple  Timeline  Motion  Tween 


The  term  "Tweening"  means  "in  between".  Animations  can  be 
created  in  Flash  with  the  help  of  the  Tweening  method.  By 
using  this  method,  changes  can  be  made  in  the  animations 
very  easily.  The  movement  from  one  keyframe  to  the  other 
becomes  convenient  with  the  use  of  the  Tweening  method  in 
Flash.  Tweened  animation  also  helps  in  decreasing  the  size  of 
the  files.  In  Flash,  it  is  the  most  effective  way  of  creating 
movements. 

There  are  two  types  of  Tweened  animation  in  Flash.  One  is  the 
Motion  Tween  and  the  other  is  the  Shape  Tween. 

Motion  Tween  in  Flash  is  primarily  used  to  change  properties 
of  a  group,  types  or  instances.  Properties  like  the  size,  position  and 
rotation  of  the  symbols  can  be  defined  at  one  time  by  a  motion 
Tween.  The  same  can  again  be  changed  if  needed,  at  another  point 
of  time.  A  motion  Tween  can  also  be  created  along  a  path. 
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Timeline  of  a  Motion  Tween  Animation 


By  using  the  Motion  Tween,  color  changes  can  also  be  made  to 
instances  or  types. 

Motion  Tweens  can  be  created  in  two  ways  in  Flash.  These  are: 

•  Using  the  Motion  Tween  option 

•  Creating  the  Motion  Tween  along  the  path 
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5.2.1  Using  The  Motion  Tween  Option 

There  are  certain  steps  to  be  followed  for  using  the  motion  Tween 
option  for  creating  the  animation.  To  do  this,  first: 

1.  Make  a  layer  active  by  clicking  on  it. 

2.  On  this  layer,  select  an  empty  keyframe.  It  will  be  here  where 
the  animation  will  begin. 

3.  Next,  the  first  frame  of  the  motion  Tween  is  to  be  created.  This 
can  be  done  either  by  drawing  a  graphic  object  and  converting 
it  into  a  symbol  or  by  dragging  an  instance  of  a  symbol  from  the 
Library  Panel.  This  can  also  be  done  by  creating  on  the  stage  a 
group,  an  instance  or  a  text  block. 

4.  Keep  the  new  keyframe  selected. 

5.  Now,  choose  another  keyframe  where  the  animation  is  suppose 
to  end. 

6.  At  times,  the  item  or  the  object  in  the  last  frame  needs  to  be 
changed.  To  do  this,  either  the  position  of  the  object  can  be 
changed  or  the  size  can  be  modified.  Change  in  color  for  text 
block  and  instances  can  also  be  done. 

7.  Next,  from  the  entire  frame  span  of  the  Tween,  choose  a  frame. 

8.  Now,  select  Motion  as  Tween  in  the  Properties  Inspector. 


j  £  Properties  X  |  Filters  |  Parameters  | 

None  v 
None 

|5hape 

Label  type: 
I  Name 


Tween  option  in  the  Properties  Inspector 

9.  At  the  time  of  Tweening,  the  object  can  also  be  made  to  rotate. 
This  can  be  done  by  attributing  any  of  the  rotation  options.  You 
can  select  Auto  to  make  the  object  rotate  in  that  direction  where 
the  motion  required  is  least.  The  Clockwise  and  Counterclockwise 
options  can  be  used  to  specify  the  number  of  rotations.  If  no  rota- 
tion is  desired,  then  choose  the  'none'  option. 


Frame  Tween: 
^Fr^mp  I  phpl^ 
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10.  In  the  Properties  Inspector,  choose  the  option  Sync  in  order  to 
match  the  Timeline  and  the  animation  of  graphic  symbol 
instances. 

We  can  also  create  Motion  Tween  along  a  Path.  This  process  is 
discussed  next. 

5.2.2  Creating  The  Motion  Tween  Along  A  Path 

Just  imagine  you  have  visited  an  unknown  tourist  spot.  You  don't 
know  which  path  you  will  follow  so  that  you  can  reach  the  desti- 
nation. What  will  you  do?  A  voyage  of  discovery?  Jokes  apart...  you 
should  take  a  guide.  A  guide  knows  the  route.  He  will  take  you  to 
your  destination.  Similarly  in  Flash  a  motion,  a  guide  defines  the 
trajectory  of  the  movement  of  an  object.  If  you  apply  Motion 
Guides  a  new  Layer  is  introduced  which  is  called  a  Motion  Guide 
Layer.  Whatever  you  draw  as  a  guide  in  the  Motion  Guide  Layer  is 
not  visible  in  the  final  animation. 

The  Motion  Guide  layers  are  basically  used  by  objects  to 
acquire  a  logical  position.  Lines  and  shapes  can  be  drawn  into  the 
Guide  layers.  These  lines  and  shapes  are  used  by  the  objects  to  jus- 
tify the  position. 

Now  let's  see  how  Motion  Guide  is  used: 

1.  Say  you  have  an  object  placed  in  the  first  key  frame 

2.  Convert  it  to  a  graphic 

3.  Set  the  registration  point  at  the  centre 

4.  Now  create  another  keyframe  where  you  tend  to  complete  the 
animation 

5.  Now  if  you  apply  motion  Tween  then  you  will  get  a  linear  move- 
ment, so  don't  do  that  at  this  point  of  time 

6.  Add  a  Motion  Guide  Layer 

7.  Now  with  your  pencil  Tool  draw  a  path  which  should  be  fol- 
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lowed  by  the  object  while  in  motion 

8.  Come  back  to  the  1st  layer  which  holds  the  object 

9.  With  your  mouse  drag  the  object  and  place  it  just  at  the  start- 
ing point  of  the  path 

10.  Now  move  to  the  last  key  frame 

11.  Move  the  object  and  attach  the  centre  at  the  ending  point  of 
the  path 

12.  Right-click  on  the  mouse  and  apply  motion  Tween 

13.  You  will  see  the  object  is  moving  following  the  path 

14.  Remember,  don't  apply  motion  Tween  on  the  guide  layer. 


5.2.3  Using  Easing  Controls 

Easing  is  used  in  Flash  to  create  much  more  realistic  looking  ani- 
mations. In  order  to  deal  with  the  types  of  motion  which  acceler- 
ate sometimes  and  decelerate  in  other  instances,  easing  is  the  eas- 
iest solution  that  is  used  by  Flash. 

The  Ease  setting  made  in  the  Properties  Inspector  of  a 
keyframe  is  responsible  for  regulating  the  acceleration  and  decel- 
eration. The  Easing  slider  is  used  to  specify  the  values. 

Easing  in  Flash  can  occur  in  two  ways.  Ease  In  and  Ease  Out.  If 
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Frame 
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Ease  option  in  the  Properties  Inspector 


the  motion  begins  slowly  and  speeds  in  the  end,  then  it  is  called 
Ease  In.  On  the  other  hand,  when  the  object  moves  fast  in  the 
beginning  and  slows  down  at  the  end,  then  it  is  called  Ease  Out. 

There  is  however  another  easing  method  that  can  be  used  in 
Flash.  It  is  known  as  Custom  Easing.  The  main  difference  between 
Ease  In  and  Ease  Out  and  Custom  easing  is  that,  in  the  Ease  In  and 
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Ease  Out  methods,  only  one  setting  can  be  applied  between  two 
Keyframes.  Custom  Easing  on  the  other  hand  is  used  to  make  the 
easing  of  the  Tween  much  more  fine  and  smooth.  This  can  easily 
be  done  by  using  the  Custom  Easing  dialog  box. 


Property:  ■     0 Use  one  setting  for  all  properties 
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Cancel 


w\  ^|  Frames 

Custom  Easing  dialog  box 

To  open  the  Custom  Easing  dialog  box,  you  first  need  to  select 
a  keyframe.  Once  this  is  done,  add  motion  as  Tween  from  the 
Properties  Inspector,  if  required.  Next,  click  on  the  Edit  button. 
The  Edit  button  is  present  just  beside  the  Ease  Slider.  The  Custom 
Ease  In/Ease  Out  dialog  box  appears  on  the  screen  after  this. 

The  Custom  Ease  In/Ease  Out  dialog  box  has  several  parts  and 
each  has  its  functions  of  its  own.  The  various  parts  are: 

•  The  Graph  area 

•  The  Graph  Line  and  the  Control  Points 

•  The  Play  Preview  Button 

•  Modifying  a  graph 

You  can  see  a  line  in  the  graph  area.  This  line  stands  for  the 
amount  of  Tween  that  has  occurred  over  the  time.  The  Tween  per- 
centage scale  appears  vertically  and  contains  the  range  from  0%  to 
100%.  The  Frame  Scale  in  terms  of  the  Current  Frame/Percentage 
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appears  horizontally.  If  there  is  a  Tween  with  no  easing  at  all,  then 
it  is  denoted  by  a  450  straight  line.  This  line  begins  at  0%  in  the 
first  frame  and  ends  at  the  last  frame  which  is  100%. 

The  Graph  Line  and  the  control  points  appear  next.  The  con- 
trol points  appear  by  right-clicking  on  the  graph  line.  These  con- 
trol points  have  handles  to  change  the  shape  of  the  graph.  Usually, 
a  Tween  only  has  a  control  point  at  the  beginning  and  at  the  end. 
These  points  help  ion  easing  in  and  easing  out  a  Tween.  However, 
if  the  easing  needs  to  be  changed  in  the  middle  of  a  Tween,  then 
more  control  points  can  be  easily  added. 

The  function  of  the  Play  Preview  Button  is  to  enable  adjust- 
ments easily.  The  dialog  box  does  not  require  to  be  closed  if  you  are 
using  this  button. 

While  modifying  a  graph,  the  cursor  usually  change  shapes. 
The  change  in  the  cursor  suggests  the  result  if  you  'click'.  While 
modifications  are  made  to  the  graph,  some  other  tasks  can  also  be 
done.  They  are: 

•  Selecting  a  control  point 

•  Adding  a  control  point 

•  Moving  a  control  point 

•  Modifying  the  shape  of  the  graph  either  before  or  after  a  con- 
trol point 

•  Deselect  all  the  control  points 

5.3  Develop  A  Simple  Timeline  Shape  Tween 

Shape  Tweening  is  the  second  type  of  Tween  in  Flash.  While  cre- 
ating a  shape  Tween,  you  can  first  draw  a  shape  in  a  frame  at  a  spe- 
cific point  of  time.  The  shape  can  be  changed  or  an  entirely  dif- 
ferent shape  can  be  drawn  at  a  different  point  of  time.  The  ani- 
mation is  created  as  Flash  alters  the  values  and  shapes  present  in 
the  frames. 

Say  you  have  a  box  and  want  to  make  it  into  a  circle.  In  these 
cases  you  need  two  shapes,  namely  a  square  and  a  circle.  You  can 
do  this  by  using  the  Shape  Tween.  Shape  Tween  does  not  work  if 
the  object  is  converted  to  symbol.  You  can  can  create  a  fantastic 
morphing  effect  by  using  Shape  Tween. 
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Timeline  of  a  Shape  Tween 


Shape  Tweens  can  also  be  made  more  accurate  with  the  use  of 
shape  hints.  You  can  specifically  set  the  names  of  the  corners  and 
set  a  direction  to  them  while  changing  the  shape.  Shape  Hints  are 
available  from  Modi  fy  >  Shape  >  Add  shape  Hint.  The  short- 
cut for  adding  shape  hint  is  [Ctrl]   +   [Shift]   +   [H]  . 

If  you  need  to  remove  the  shape  hint  from  the  shapes  before 
applying  Shape  Tween  then  the  steps  are  Modify  >  Shape  > 
Remove  All  Hints. 

However  if  you  need  to  perform  shape  Tween  with  text,  it  will  not 
work.  In  order  to  Shape  Tween  text,  you  have  to  apply  break  apart 
and  transform  the  text  to  pixels.  Applying  Break  apart  will  result  to 
the  loss  of  text  properties.  Once,  the  break  apart  is  done,  the  shape 
Tween  can  be  applied  to  the  texts  successfully  by  the  same  process. 

Steps  to  create  Shape  Tween: 

1.  Draw  an  object  in  the  first  keyframe  of  the  Time  Line 

2.  Don't  convert  it  to  Symbol 

3.  Insert  a  Blank  Keyframe 


on  the  final  position 

4.  Draw  a  new  shape 

5.  Now  click  on  the  layer 
to  select  all  the  frames 

6.  From  Tween  in 
Properties  Inspector 
choose  Shape  Tween 

7.  That's  all....  You  play 
the  movie  to  see  the 
Shape  Tween. 
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Break  Apart  option  under  Modify  Menu 
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5.4  Importing  An  Image  For  Animation 


It  is  not  always  required  to  draw  an  object  on  the  stage  and  then 
create  an  animation  on  it  in  Flash.  If  you  want,  Flash  can  also  be 
used  to  create  animations  from  external  images  or  bitmaps. 
However,  these  images  have  to  be  imported  to  the  stage  first  before 
creating  the  animation.  This  is  because  the  images  are  stored  in 
some  other  folder.  It  may  seem  to  be  a  hard  task  to  importing 
images  in  Flash,  but  it  isn't. 

First  open  a  blank  Flash  document.  After  the  stage  is  dis- 
played, click  on  the  File  menu.  Next,  click  on  Import  and  then 
on  Import  to  Stage  from  the  drop  down  menu.  The  Import  dia- 
log box  appears.  From  here,  choose  the  location  where  the 
image  is  stored.  Click  on  the  location.  If  the  image  is  stored  in 
a  folder,  then  all  the  images  in  that  particular  folder  will  be  dis- 
played. Choose  the  image  on  which  you  would  like  to  apply  the 
animation.  Select  the  image  and  click  on  Open.  The  image  will 
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now  appear  on  the  Stage.  You  can  now  create  any  animation 
you  wish  on  the  image.  You  can  give  the  image  a  gray  scale 
effect,  you  can  also  make  the  image  vanish  and  then  reappear 
on  the  screen.  You  can  rotate  the  images  as  well  as  make  text 
appear  with  the  images. 

Sometimes  it  may  so  happen  you  are  not  sure  whether  you 
are  going  to  use  a  bitmap  at  that  instant  or  not.  Here,  without 
importing  an  image  directly  to  the  stage,  you  can  import  the 
image  to  the  Library.  By  doing  this  your  stage  will  not  be  occu- 
pied by  an  image.  Later  you  can  drag  the  image  from  the  Library 
as  and  when  required.  For  this  you  have  to  follow  some  simple 
steps  as  follows: 

File  >  Import  >  Import  to  Library 

Later  on  this  Library  can  also  be  opened  in  another  file  as 
an  external  Library  and  the  imported  image  can  be  used  there 
as  well. 
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5.5  Transparent  Background  Images 


Sometimes  while  importing  an  image  in  Flash  you  may  face  some 
problems,  such  as  an  unwanted  background  in  your  image.  This 
problem  can  be  handled  easily. 

All  you  have  to  do  is  to  delete  the  unwanted  background  in 
Adobe  Photoshop.  Adobe  Photoshop  is  a  popular  image  editing  soft- 
ware and  hence  the  background  deletion  can  be  done  very  easily. 

Now  when  you  get  your  desired  image  in  a  transparent  back- 
ground, save  the  file  in  .png  (portable  network  group)  extension. 

After  you  save  this  file  in  .png  format,  you  import  this  in  your 
flash  animation. 

You  will  find  the  image  has  been  imported  with  the  transpar- 
ent background. 
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Timeline  Effects  And 
Filters 

It's  not  all  about  motion  and  shape  shifting!  Flash  CS3  beings  a  lot 
of  really  cool  effects  and  filters  into  play,  using  which  you  can  cre- 
ate some  really  impressive  animations.  And  it's  all  available  to  you 
out  of  the  box. 

6.1  Timeline  Effects  in  Flash 


The  Timeline  in  Flash  consists  of  a  number  of  frames.  The  frames 
in  Flash  are  used  to  hold  the  duration  of  time  of  the  animation. 
Each  frame  holds  some  part  of  the  animation. 

The  Timeline  Effects  in  Flash  are  available  under  the  Insert 


1  Modify    Text    Commands    Control  Debug 

New  Symbol...  Ctrl+FS 

Timeline  > 

1  n           1  r  ^in 

Timeline  Effects  > 

Assistants  ► 
Effects  ► 
Transform/Transition  ► 

Scene 

 n — 

Options  of  Timeline  Effects 


menu.  The  Timeline  Effects  have  three  options.  They  can  be  classi- 
fied as  Assistants,  Effects,  and  Transform/Transition.  There  are  a 
number  of  sub-options  available  as  well. 

The  Timeline  Effects  in  Flash  play  an  important  role  in  creat- 
ing animations.  By  using  the  Timeline  Effects,  you  can  actually 
assign  attributes  like  Blur,  Drop  Shadow  on  the  object  in  the  stage 
rather  than  using  keyframes.  It  saves  the  user  a  lot  of  time  and  the 
complexities  of  the  process  are  also  removed.  The  animation  can 
be  easily  and  quickly  created. 
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The  function  of  the  individual  Timeline  Effects  is  to  manipu- 
late a  graphic  or  a  symbol  in  a  particular  manner.  The  Timeline 
Effects  help  in  changing  the  parameters.  The  leniency  in  using  the 
Timeline  effects  helps  to  achieve  the  desired  effect  easily. 

All  the  changes  that  are  made  in  the  settings  can  be  viewed  in 
the  Preview  Window. 

6.1.1  Assistants 

Under  Assistants  there  are  two  options.  It  is  Copy  to  grid  and 
Distributed  Duplicate. 
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Copy  To  Grid 

The  function  of  Copy  to  grid  is  to  create  a  grid  of  the  elements. 
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This  is  done  by  duplicating  a  selected  object  first  by  its  columns. 
The  columns  are  then  multiplied  by  the  number  of  rows  to  get  the 
grid  of  the  elements.  The  settings  in  the  Copy  to  grid  include  num- 
ber of  columns,  number  of  rows  under  Grid  Size  and  distance 
between  the  rows  and  columns  under  Grid  Spacing.  The  values 
under  Grid  Spacing  are  denoted  in  terms  of  pixels. 

Distributed  Duplicate 

The  function  of  Distributed  Duplicate  is  to  duplicate  a  select- 
ed object  for  that  number  of  times  which  is  entered  in  the  set- 


Distributed  Duplicate 


DISTRIBUTED  DUPLICATE  (  Update  Preview" 


Distributed  Duplicate  dialog  box 


tings.  The  first  element  is  usually  a  copy  of  the  actual  object.  To  get 
the  final  result,  certain  parameters  are  used  in  the  settings.  The 
Distributed  Duplicate  function  sees  that  the  copies  are  modified 
until  the  final  parameter  is  reached.  The  settings  under 
Distributed  Duplicate  include  the  number  of  copies,  Offset 
Distance  with  x  and  y  positions  denoted  in  pixels,  Offset  Rotation 
denoted  in  degrees,  Offset  Start  Frame  denoted  in  frames  across 
the  Timeline,  Exponential  and  Linear  scaling  by  x  and  y  denoted 
in  terms  of  percentage,  Final  Alpha  denoted  in  percentage, 
Change  Color,  Final  Color  in  RGB  mode  denoted  in  hexadecimal 
value,  and  duplication  delay  denoted  in  terms  of  frames. 
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6.1. 2  Effects 

Effects  under  Timeline  Effects  can  be  classified  as  Blur,  Drop 
Shadow,  Expand  and  Explode.  Each  has  its  own  functions  and 
hence  needs  to  be  studied  in  detail. 


Blur 

By  using  this  effect,  a  motion  blur  can  be  created  on  the  object  on 
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the  stage.  Change  in  the  position,  scale  or  alpha  value  of  the  object 
over  a  certain  period  of  time  creates  the  Motion  Blur  on  the  object. 
The  settings  under  blur  include  Duration  of  the  Effect  denoted  in 
frames,  Resolution,  starting  Scale,  Horizontal  blur  and  Vertical 
blur  and  the  direction  of  blur  movement. 


BLUR  f  Update  Preview 
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Drop  Shadow 

By  using  this  function,  a  shadow  is  created  below  the  selected 
object.  The  settings  under  drop  shadow  consists  of  Color  which  is 
denoted  in  RGB  mode  and  in  hexadecimal  value,  Alpha 
Transparency  in  terms  of  percentage  and  Shadow  Offset  with  X 
and  Y  positions  denoted  in  pixels. 


Drop  Shadow 


DROP  SHADOW  Update  Preview 


Drop  Shadow  dialog  box 


Expand 

The  Expand  effect  in  Flash  helps  in  either  expanding  or  con- 
tracting an  object  over  a  certain  period  of  time.  The  Expand 
effect  can  be  shown  best  on  two  or  more  objects  which  are 
grouped  together.  The  Expand  effect  can  also  be  well  demon- 
strated on  two  or  more  objects  either  combined  in  a  graphic  sym- 
bol or  in  a  movie  clip.  An  object  consisting  letters  or  text  can  also 
be  used  to  demonstrate  the  effect.  The  settings  grouped  under 
Expand  effect  include  Effect  duration  denoted  in  terms  of 
frames,  Expand,  Squeeze,  Both,  Expand  direction,  Shift  Group 
Center  with  X  and  Y  offsets  denoted  in  pixels,  Fragment  Offset 
denoted  in  pixels,  Change  Fragment  Size  with  height  and  width 
options  denoted  in  pixels. 


ESQ  FAST  TRACK 


63 


VI 


TIMELINE  EFFECTS  AND  FILTERS 


FLASH  CS3 


Explode 

An  object  gets  an  exploding  appearance  when  the  Explode  effect 
is  used  in  Flash.  The  Explode  effect  can  be  used  on  elements  of 
text.  Objects  like  video  clips,  shapes  and  symbols  which  form  a 
complex  group  can  also  be  used  to  apply  the  Explode  effect.  This 
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effect  when  used  tends  to  spin,  arc  and  break  apart  objects  and  ele- 
ments of  text.  The  settings  grouped  under  Explode  effect  include 
Effect  duration  denoted  in  terms  of  frames,  Direction  of 
Explosion,  Arc  size  with  X  and  Y  offset  denoted  in  terms  of  pixels, 
Rotate  Fragments  by  option  denoted  in  terms  of  degrees,  Change 
Fragments  Size  by  option  with  X  and  Y  offset  denoted  in  terms  of 
pixels  and  Final  Alpha  value  denoted  in  terms  of  percentage. 


6.1.3  Transform/Transition 

Transform 

In  order  to  adjust  the  position,  rotation,  alpha,  scale  and  tint  of 
the  selected  elements  in  Flash,  the  Transform  function  is  used. 
This  effect  in  Flash  is  extremely  useful  when  it  is  needed  to  apply 
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either  a  particular  effect  or  multiple  effects  on  an  object.  The  var- 
ious effects  that  can  be  applied  consist  of  Fly  In/Out,  Fade  In/Out, 
Spin  Left/Right  and  Grow/Shrink. 

The  settings  present  under  Transform  consists  of  Effect 
Duration  denoted  in  frames,  Move  to  position  with  X  and  Y  offset 
denoted  in  pixels,  Change  position  by  option  with  X  and  Y  offset 
denoted  in  pixels,  Rotate  denoted  in  terms  of  degrees,  Spin  denot- 
ed in  terms  of  number  of  times,  Times  option  both  Counter  clock- 
wise and  clockwise,  Scale  option  when  locked  applies  equal 
change  denoted  in  percentage  and  when  unlocked  applies  changes 
separately  in  X  and  Y  axis.  The  value  is  denoted  in  terms  of  per- 
centage. Other  options  available  are  Change  Color,  Final  Color, 
Final  Alpha  denoted  in  terms  of  percentage  and  Motion  Ease. 
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TRANSFORM 


Update  Preview 


Transform  dialog  box 


Transition 

If  a  selected  object  is  required  to  be  wiped  in  or  wiped  out  by 
either  fading  or  wiping,  then  the  Transition  effect  is  used  in  Flash. 
The  settings  present  under  Transition  consist  of  Effect  Duration 
denoted  in  frames,  Direction  with  In  and  Out  options,  Fade 
option,  Wipe  option  and  Motion  Ease. 


Transition 

TRANSITION                                                                                                                                      Update  Preview 

Effect  Duration:    |3D     |  frames 

Mption  Ease:      0  | 

SLOW  AT   1                                                1   SLOW  AT 

s-A.c  Eric 

Transition  dialog  box 
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6.2  Filters 


Filters  in  general  sense  means  something  that  removes  the  impu- 
rities and  gets  back  the  pure  form.  Filters  in  Flash  CS3  is  nothing 
but  a  feature  that  adds  refined  visual  effects  to  text,  buttons  and 
Movie  clips.  These  visual  effects  includes  drop  shadow,  blur,  glow, 
gradient  glow,  gradient  bevel  and  bevel.  Filters  do  not  change  the 
symbols  permanently.  So,  you  can  add  filters  on  different 
instances  of  the  same  symbols  and  whenever  you  feel  like  it, 
remove  them.  Here  you  can  adjust  the  brightness,  contrast,  satu- 
ration and  hue  level  in  the  Movie  clip  by  using  the  adjust  color  fil- 
ters. By  using  Filter  tab  in  Properties  Inspector  or  Action  script  fil- 
ters effects  can  be  applied  to  Movie  clips,  buttons  or  text  fields. 

Using  Flash  filters  enables  you  to  create  beautiful  graphics. 
One  of  the  unique  characteristic  in  Flash  is  the  provision  of  ani- 
mating the  filters  by  using  motion  Tween.  Let  us  consider  one 
example  for  instance,  if  you  create  a  ball  using  drop  shadow,  you 
will  find  the  light  source  moving  from  one  side  of  the  object  to 
another  by  changing  its  position  in  the  Timeline.  While  applying 
Filters  you  can  set  up  the  orders  of  filters  in  your  own  way  to  try 
out  with  combined  effects.  Apart  from  this  if  you  wish  you  can 
enable  and  disable  filters  or  even  delete  them  from  the  Property 
Inspector.  Just  by  selecting  the  object  you  can  view  the  filters 
applied  to  it,  this  will  automatically  modify  the  filters  list  in  the 
Property  Inspector. 

You  can  use  Filters  in  practical  sense.  Suppose  you  want  to 
float  something  over  the  stage.  What  you  need  to  do  is  to  apply 
drop  shadow  filter  to  a  clip.  Let  us  consider  one  example,  suppose 
you  want  to  desaturate  a  photo  and  give  it  a  black  and  white  look. 
What  will  you  do?  You  have  to  do  nothing  but  import  one  photo 
you  want  to  desaturate  and  then  convert  it  to  a  Movie  clip  symbol. 
Then  from  the  filters  panel  select  Adjust  color'  and  then  adjust 
the  saturation  slider  to  the  left  and  set  it  to  -100.  If  you  want  you 
can  also  give  a  yellow  tinge  by  adjusting  the  Hue  slider.  So  after 
reading  this  you  can  apply  Filters  in  practical  sense. 

Do  you  know  filters  cannot  be  used  independently?  It  is 
dependent  upon  the  object  instance  to  which  you  apply  the  filters. 
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Now  while  applying  a  filter  to  a  particular  object  or  Bitmap  Data 
instances  you  need  to  follow  the  guidelines: 

1.  Always  use  the  filters  Properties  while  you  apply  filters  to  movie 
clips,  text  fields  and  buttons.  The  filters  property  of  an  object 
can  be  altered  by  clearing  the  filters  property. 

2.  Use  BitmapData.applyFilter  ( )  method  to  apply  filters  to 
Bitmap  Data  instances. 

3.  Besides  this,  filter  effects  can  also  be  applied  for  composing 
images  and  videos  with  the  help  of  Filters  tab  in  the  Properties 
Inspector. 

However,  it  should  be  remembered  that  too  much  usage  of 
Filters  in  a  Flash  application  may  cause  damage.  Applying  of  too 
many  filters  for  an  application  may  cause  large  amount  of  memory 
loss  and  that  in  turn  would  affect  the  Flash  player's  performance. 

Whenever  you  add  a  new  filter  to  any  object  it  gets  added  to 
the  list  of  the  applied  filters  of  that  particular  object  in  the 
Properties  Inspector.  As  you  have  read  earlier  you  can  add  filters  to 
an  object  and  at  the  same  time  you  can  remove  the  applied  filter. 
So,  by  creating  a  filter  setting  library  allows  you  to  apply  that  same 
filter  or  the  sets  of  filters  to  an  object.  One  thing  that  should  be 
kept  in  mind  is  Filters  cannot  be  applied  to  any  other  object  other 


1  Properties  I  Filters  •    Parameters  1 

Blur  X:    I         v-,          Color:  |g|              □  Knockout 
BlurY:  |b  |v— 1                                      1  1  Inner  shadow 
Strength:  |  100%  |v            Angle:  |~45     |v        □  Hide  object 
Quality:  ||_ow        v|       Distance:  |~5  |v 

Filters  panel 


than  text,  button  and  Movie  clip  objects.  Suppose  you  want  to 
apply  Filters.  For  that  follow  the  steps: 

1.  Go  to  the  Properties  Inspector  and  click  on  the  Filters  tab 

2.  There  you  will  find  a  (plus)  +  and  -  (minus)  sign. 

3.  So,  click  on  the  +  sign. 

4.  A  drop  down  list  appears. 

5.  From  there  you  can  select  the  filters  according  to  your  choice. 
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In  the  drop  down  list  you  will  find  Drop  Shadow,  Blur,  Glow, 
Bevel,  Gradient  Glow,  Gradient  Bevel  and  Adjust  Color.  Each  of 
them  renders  different  effect  as  you  apply. 

As  for  example  Drop  Shadow  adds  to  the  profundity  of  the 
image.  The  shadow  applied  to  the  text  or  the  image  depends  on 
the  settings  where  you  can  set  the  blur,  strength,  quality,  color, 
angle  and  distance. 

The  Blur  effect  adds  to  the  smudginess  of  the  entire  content  of 
the  instance.  Here  you  get  to  set  the  blur  and  quality  level. 

The  Glow  effect  draws  a  duplicate  of  your  instance's  shape  and 
blurs  it  too.  If  you  apply  this  effect  upon  any  text,  it  appears  some- 
what like  a  mist  on  the  original 
layer  on  the  top.  This  glow 
stands  out  contrasting  to  the 
text  color.  Here  you  have  the 
option  of  adjusting  the  blur, 
strength,  quality  and  color. 

The  Bevel  effect  gives  a 
raised  look  to  the  instance.  This 
raised  part  is  highlighted  which 
gives  an  embossed  look.  You 
can  darken  this  embossed  look 
by  simply  adjusting  the  blur, 
Strength,  quality,  shadow,  high- 
light, angle,  distance  and  type. 

The  Gradient  glow  in 
Filters  reflects  the  glow  but 
not  the  color  of  the  glow.  Now 
you  can  adjust  this  gradient  Filter  options 
glow  by  altering  the  blur, 
Strength,  quality,  knockout  distance  and  type. 

Gradient  Bevel  is  much  like  highlight  and  here  the  shadows 
are  gradated.  Here  you  can  adjust  the  blur,  Strength,  quality, 
angle,  knockout  distance  and  type. 

The  last  option  is  the  Adjust  Color.  Here  you  can  show  your 
own  creativity  in  the  context  of  color.  Here  you  can  add  bright- 
ness, contrast,  saturation  and  hue  level. 


Presets 

► 

Remove  All 

Enable  All 

Disable  All 

\Prd 
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Drop  Shadow 
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Now  let  us  see  how  we  can  remove  Filters.  So,  just  follow  the 
steps: 

1.  First  you  need  to  select  the  button,  Movie  clip,  button  or  the  text 
object  from  where  you  want  to  get  rid  of  the  filter. 

2.  Now  in  the  Properties  Inspector  select  the  Filter  tab.  From  the 
list  of  applied  filters  select  the  filter  that  you  want  to  delete  or 
remove. 

3.  Now  click  on  the  Remove  Filter  (-)  button  in  order  to  remove  it. 

Filters  that  are  being  used  for  a  symbol  may  be  stored  by  a 
name  for  future  use.  This  is  saved  as  Presets  in  the  Filter  Menu  that 
appears  in  the  Properties  Inspected  Panel.  Say  for  a  particular  sym- 
bol in  Flash  you  have  applied  some  filters  like  Bevel  and  Drop 
Shadow.  Now  if  you  again  click  on  the  plus  sign  ( + )  you  will  find 
an  option  called  Presets. 

In  Presets  you  will  find  "Save  As"  option.  If  you  click  on  this 
option  a  dialog  box  will  appear  where  it  will  ask  for  a  Preset  name. 
Give  a  logical  name  say  "My  Filters"  and  click  on  "OK".  All  the  fil- 
ters which  you  have  applied  will  be  saved  in  sequence  by  the  name 
"My  Filters".  This  is  reusable  and  you  can  apply  the  same  filters  to 
another  symbol  just  by  clicking  on  the  saved  preset  name. 

Follow  the  steps  to 
apply  a  Preset  Filter: 

1.  First  you  have  to 
select  the  button, 
Movie  clip  or  the  text 
object  where  you 
want  to  apply  the  fil- 
ter preset. 

2.  Then  from  the 
Properties  Inspector 
you  have  to  choose 
the  Filter  tab. 

3.  After  that  click  on 
the  Add  Filter  (  +  ) 
icon  and  then  select 
the  Presets  from  the 
Filter  drop  down  list. 


Save  As... 

Remove  All 
Enable  All 

Rename. .. 
Delete... 

Disable  All 

My  Filter 

Drop  Shadow 

Blur 
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Gradient  Glow 
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Gradient  Bevel 

ameters  | 

Adjust  Color 

Blur  X: 
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4.  From  there,  select  the  filter  preset  where  you  want  to  apply 
from  the  list  at  the  bottom  of  the  preset  schedule. 

5.  Select  your  symbol  and  just  click  on  it  to  apply. 

Suppose  you  want  to  enable  or  disable  a  Filter.  So  how  would 
you  do  it?  Just  click  the  enable  or  the  disable  icon  in  the  Filter  list 
located  after  the  filter  name  in  the  Properties  Inspector. 

Now  suppose  you  want  to  enable  or  disable  all  the  filters 
applied  to  an  object.  So,  how  will  you  do  it?  What  you  need  to 
do  is  just  click  on  the  Add  Filter  (  +  )  button  in  the  Property 
Inspector  and  select  Enable  All  or  Disable  All  from  the  drop 
down  menu. 

Animation  is  another  interesting  thing  in  Filters.  You  cannot 
animate  any  other  thing  apart  from  Movie  clips  and  that  too  if 
that  Movie  clip  have  filters  already  applied  to  it.  Objects  that  are 
kept  on  separate  frames  and  are  being  animated  by  using  Tween 
change  their  parameters  of  filter  in  the  intermediate  frames.  In 
case  a  filter  does  not  have  a  matching  filter,  i.e.  a  filter  of  same 
type  at  the  opposite  end  of  the  Tween,  don't  worry  a  maching 
filter  is  automatically  added  which  assures  that  the  effect  will 
come  at  the  end  of  the  animation  sequence. 

So  let's  see  how  to  animate  a  filter  using  Flash  CS3. 

1.  First  you  have  to  create  a  new  Flash  document  and  save  it  as  'ani- 
mation.fla' 

2.  Then  add  a  Movie  clip  instance  on  Frame  1  on  the  Stage.  Then 
choose  the  instance  and  open  the  Filters  tab. 

3.  Now  you  have  to  click  on  the  Add  Filter  ( + )  buton  and  then 
from  the  dropdown  menu  select  Glow. 

4.  After  that  change  the  Blur  X  and  Y  values  to  25  in  the  Filter  tab. 
Then  on  the  Timeline  select  Frame  15  and  add  a  new  keyframe 
by  pressing  F6. 

5.  Now  select  the  Movie  clip  instance  and  open  the  Filter  tab.  Here 
change  the  Blur  X  and  Y  values  to  2. 

6.  Then  go  to  the  Windows  menu  and  choose  Create  Motion  Tween 
from  the  context  menu. 

7.  Your  animation  is  ready. 

8.  To  test  it  go  to  Control  >  Test  Movie . 


HSU  FAST  TRACK 


71 


VI 


TIMELINE  EFFECTS  AND  FILTERS 


FLASH  CS3 


Application  Of  Filter  In  Animation 

Now  let's  look  at  how  you  can  apply  filters  in  animation. 

Lightning  Animation 

Let's  learn  to  create  an  animated  lightning  in  Flash. 

•  Open  a  new  file  with  a  dark  background. 

•  Go  to  the  Properties  Inspector. 

•  Set  the  Frame  rate  to  28  fps. 

•  Rename  the  layer  as  'picture'. 

•  Go  to  File  >  Import  >  Import  to  Stage. 

•  Once  you  have  imported  the  image  select  the  picture. 

•  Now  press  [F8]  . 

•  Type  picture_mc  as  the  name  and  convert  it  to  a  Movie  clip. 

•  Now,  double-click  on  the  new  Movie  clip. 

•  Keep  the  picture  selected  and  press  [F8]  . 

•  Again  convert  it  to  Movie  clip. 

•  Click  on  frames  2,  3,  4,  5,  6,  7  and  press  [F6  ]  six  times. 

•  Starting  from  the  first  frame  click  on  every  alternate  frame. 

•  Now  click  on  the  picture  to  select  it. 

•  Press  [Ctrl]   +   [F3]  to  open  the  Properties  Inspector. 

•  In  the  Properties  Inspector  click  on  Filters  tab. 

•  Click  on  plus  ( + )  icon  and  select  Adjust  Color  from  the  drop 
down  list. 

•  Now  set  the  values  as: 

Brightness:  0 
Contrast:  0 
Saturation:  30 
Hue:0 

•  Repeat  the  whole  process  for  rest  of  the  keyframes. 

•  Now  click  on  frame  60. 

•  Press  [F5]. 

•  Now  move  back  to  the  main  scene. 

•  Create  a  new  layer  and  name  it  as  'lightning'. 

•  Next  lock  the  first  layer  and  select  the  lightning  layer. 

•  Select  the  Pencil  Tool  from  the  Tool  box. 

•  Select  white  for  the  Fill  color  and  Stroke  color. 

•  Set  the  Alpha  to  50%  and  select  Ink  under  Options. 
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•  Press  [Ctrl]   +   [F3]  to  open  the  Properties  Inspector. 

•  Set  the  Stroke  Height  to  3  px  and  Stroke  style  as  Solid. 

•  Now  draw  a  line  which  will  look  like  lightning. 

•  Keep  the  line  selected  and  press  [F8  ]  . 

•  Now  type  the  name  as  line_mc  and  convert  it  to  Movie  clip. 

•  Then  double-click  on  the  new  Movie  clip. 

•  Now  click  on  frame  2  and  press  [F7  ]  . 

•  Again  take  the  Pencil  Tool  and  draw  a  line. 

•  This  line  must  differ  from  the  previous  line. 

•  Repeat  the  previous  steps  seven  times. 

•  Now  click  on  frame  8  and  press  [F7  ]  . 

•  Again  click  on  frame  60  and  press  [F5  ]  . 

•  Now  move  back  to  scene  1  and  select  lightning'  line. 

•  Press  [Ctrl]   +   [F3]  and  select  Filters  tab. 

•  Convert  to  Movie  Clip. 

•  Select  the  plus  icon  and  choose  Glow. 

•  Set  the  values  as  : 

Blur  X:  12 
Blur  Y:  12 
Strength:  100% 
Quality:  Low 
Color:  White. 

•  That's  it. 

•  Press  [Ctrl]   +   [Enter]  to  see  the  preview. 
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Masking 

The  word  mask  implies  something  covered  or  something  in  dis- 
guise. Whenever  we  think  of  the  word  'Mask'  it  reminds  us  of  typ- 
ical artifact  worn  on  the  face  and  the  mask  parties  and  cere- 
monies. So  you  can  very  well  understand  that  the  idea  of  masking 
is  very  interesting. 


Objects  without  Mask  After  applied  Mask 


But  what's  Masking  got  to  do  with  a  software  like  Flash  CS3? 
Masking  in  Flash  CS3  defines  the  object  that  is  visible  in  the 
masked  layer.  So  its  very  similar  to  your  childhood  hide  and 
seek  game. 

In  Flash,  masking  hides  the  other  part  and  shows  only  those 
parts  of  an  image  which  is  exactly  the  same  shape  of  the  object  on 
which  we  are  applying  the  masking  effect.  Masking  in  Flash 
allows  to  create  interesting  visual  effects.  Let  us  create  one  mask 
layer  following  these  steps. 

1.  Select  one  layer  in  which  it  will  contain  the  object  to  appear 
inside  the  mask.  You  can  also  create  your  own  layer. 

2.  Now  select  Insert  >  Timeline  >  Layer  to  create  a  new  layer 
just  above  it. 

3.  Remember  a  mask  layer  always  covers  the  layer  immediately 
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below  it,  so,  create  the  mask  layer  in  proper  place. 

4.  You  have  to  then  place  one  filled  shape,  text  or  an  instance  of  a 
symbol  upon  the  mask  layer. 

5.  Flash  does  not  notice  bitmaps,  gradients,  transparency,  color 
and  line  styles  in  a  mask  layer.  Any  objects  that  are  filled  remain 
absolutely  transparent  when  mask,  and  nonfilled  areas  display. 

6.  Now,  go  to  the  Timeline  and  right-click  on  the  mask  layer's 


1  Modify    Text    Commands    Control    Debug  Window 

New  Symbol,.,  Ctrl+F8 

1  Timeline 

n 

Timeline  Effects  ► 

Layer  Folder 

Scene 

Motion  Guide 

Frame  F5 

Keyframe 

Blank  Keyframe 

Create  Motion  Tween 

— 1  s 

* 

Create  Shape  Tween 

Layer  category  in  Insert  Menu 


name  that  you  have  assigned,  from  there  select  mask. 

7.  Mask  layer  is  identified  by  an  icon  displayed  on  it 

8.  If  you  want  to  see  the  mask  effect  in  Flash,  then  what  you  need 
to  do  is  just  lock  the  mask  layer  and  the  masked  layer. 

Apart  from  this  masking  in  Flash  serves  one  main  function— it 
adds  some  beautiful  effects.  Masking  is  often  used  in  Flash  to  cre- 
ate a  spot  light  effect  that  would  display  the  text  through  a  hole. 
You  can  also  create  a  mask  layer  by  simply  following  the  above 
steps  mentioned,  but  in  case  of  movie  clip,  it  is  a  bit  different.  You 
cannot  create  a  mask  layer  from  a  Movie  clip  in  the  way  you  did 
before.  For  this  you  need  to  use  the  ActionScript.  Whenever  any 
ActionScript  is  applied  it  is  specifically  done  for  the  Movie  clip  and 
nothing  else. 
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Properties. 


Mask  option 


Now  let  us  think  how 
can  we  work  with  the  mask 
layers.  Mask  layers  can  be 
used  for  the  purpose  of  dis- 
closing the  graphics  or  the 
picture  portions  in  the  layer 
below.  What  the  mask  layer 
does  for  you  is  expose  the 
areas  of  the  linked  layers 
under  the  filled  shape. 

Let  us  animate  a  mask 
by  using  Flash.  It  is  a  very 
simple  and  easy  application. 
So,  let  us  unmask  a  text 
header.  Now  follow  the 
steps. 

1.  Move  your  mouse  to  the 
Insert  menu  and  create 
one  new  symbol 

2.  Convert  it  to  a  Graphic 
symbol  and  you  can  name 
it  as  'Graphicl '. 

3.  Here  you  use  the  text  tool 
to  create  the  title  inside 
the  symbol. 


Adobe  Flash  CS3  Professional  -  [Untitled -2*] 
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4.  You  can  use  any  font,  size  and  color  according  to  your  choice. 

5.  Now  again  you  have  to  come  back  to  Scene  1  and  click  on  the 
'Scene  V  button.  Note  that  the  button  is  located  just  above  the 
stage. 

6.  From  the  Window  menu  select  the  Library  and  highlight  the 
symbol. 

7.  Now  we  need  to  bring  out  the  sym- 
bol from  the  library  onto  the  Stage, 
set  the  symbol  at  the  center. 

8.  What  you  have  to  do  now  is  to  select 


h  CS3  Professional  [Untitl 

Insert 


Modify    Text  Comrnan 


Name:    Graphic  1 


Type:  (_.:-Mo  = 
O  Button 
©  Graphic 


CjjeW  SymboT^  Ctrl+FS 


Timeline 
Timeline  Effects 


5cene 


Create  New  Symbol  dialog  box 


New  Symbol  option  on  Insert 
Menu 


frame  30  of  layer  1.  Right-click  on  it  to 
select  the  'Insert  frame'  from  the  drop- 
down list.  Again  convert  it  to  the 
Graphic  symbol  as  you  have  done  it 
previously  and  then  name  it  as 
'Graphic2'. 
9.  Now  within  this  symbol  with  the  help 
of  a  rectangle  tool  draw  a  rectangle 
and  fill  it  with  black  color.  Remember 
the  length  and  height  of  the  rectangle 


4. 

q, 

\ 

Text  Tool 

Text  Tool 


I 

i  _J  S 

t    %  ft   *   [■]     1      12.0  fps      0.0s  t<l 

ne  1    H  Graphic  1 


Adobe  Flash  CS3 


'Scene  r  Button 
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J  Library  x  [ 


Untitled-4 


One  item  in  library 


Adobe  Flash  CS3 


Type 


] 


"  car  -  ;.r  if 


^Insert  FrameJ> 


should  match  with  length  and 
height  of  your  text. 

10.  Again  come  back  to  Scene  1  and 
insert  one  new  layer  at  the  left 
hand  bottom  corner  on  the 
timeline  and  then  choose  the 
first  frame  from  this  layer. 

11.  Open  the  library  window  again 
and  drag  the  'Graphic 2'  symbol 
to  the  Stage  from  the  library. 

12.  Then  place  the  Graphic2  sym- 
bol in  order  to  cover  the 
Graphicl  symbol.  Note  you  may  Library  Panel  with  Symbol 
find  this  symbol  as  too  small 
but  if  its  not  very  small  then 
you  can  skip  onto  step  15. 

13.  As  the  Graphic2  symbol  is 
already  selected,  from  the 
Modify  menu  choose  Transform 
and  only  after  that  select  the 
Scale  from  the  fly-out  the  one 
which  would  appear. 

14.  Notice  the  edge  of  the  rectangle 
is  not  adjusted  properly  so 
adjust  the  edges  of  the  rectan- 
gle in  such  a  way  that  it  will 
cover  the  whole  text 
behind  it. 

15.  Then  click  on  the 
stage  but  outside  the 
rectangle  to  complete 
the  transform. 

16.  Now  on  the  timeline 
right  click  on  Layer  2 
to  select  the  Mask. 
Remember  not  to 
work  on  Graphic  2. 
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Insert  Keyframe 
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Clear  Keyframe 
(  .  wet  :  Keyfra  - 
Convert  to  Blank  Keyframes 


C  ut  F  ame ; 
Copy  Frames 
Paste  Frames 
Clear  Frames 
Select  All  Frames 


.  jpy  '■•lotio 

•  ;>py  >'1«  :  ■  as  Act  '  o  ■  3,0,,, 
Paste  Motion 


Insert  Frame 


First  Keyframe  of  the 
new  layer 
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Insert  Layer  Icon 


Timeline  with  new  layer 
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Text    Commands    Control    Debug    Window  Help 


Document., 


Ctrl+J 


Convert  to  5ymbol. 
Break  Apart 


Bitmap 
Symbol 
Shape 

Combine  Objects 


Scale  option 


Ctrl+B 


Timeline 

► 

Timeline  Effects 

► 

1     Transform  ► 

Arrange 

► 

Align 

► 

Group 

Ctrl+G 

Ungroup 

Ctrl+Shift+G 

20 


25 


30 


35 


12.0  fps      0.0s  < 


Free  Transform 
Distort 
Envelope 
Scaled 
Rotate  and  Skew 
Scale  and  Rotate. 


Ctrl+Alt+S 


Remove  Transform  Ctrl+Shift+Z 


40 


Rotate  90°  CW 

Ctrl+Shift+9 

Rotate  90°  CCW 

Ctrl+Shift+7 

Flip  Vertical 

Flip  Horizontal 

Notice  that  the  Graphic  2  is  acting  as  the  hole  in  the  layer. 

17.  Now  unmask  the  layer  as  you  did  it  previously...  click  on  the 
lock  icon  on  the  masked  layers  to  unlock  it.  Then  deselect  them 
to  work  on  the  other  layers. 

18.  Now  right-click  on  layer  2  on  frame  30  to  select  'Inert 
Keyframe'.  Again  right  click  on  the  same  layer  on  frame  1  to 
insert  keyframe.  Move  the  Graphic  2  symbol  to  the  far  right 
side  of  the  rectangle  against  the  left  edge  of  your  header 

19.  After  this  again  go  to  the  second  layer  and  right  click  anywhere 
between  frames  1  and  30.  Select  'Create  Motion  Tween'  option 
from  the  drop  down  list. 


HSU  FAST  TRACK 


79 


VII 


MASKING 


FLASH  CS3 


20.  So,  you  will  find  that  the  animated  Graphic  2  symbol  will  now 
act  as  the  animated  mask;  this  animated  mask  will  bring  out 
the  Graphic  1  symbol. 

So,  with  this  simple  example  you  can  easily  apply  the  same 
technique  to  numerous  effects  and  create  your  own  creation. 
Just  follow  the  above  method  and  you  can  easily  come  out  with 
new  effects. 

If  you  have  a  Motion  Tween  created  with  the  help  of  a  guide 
layer  then  Masking  cannot  be  applied  on  it.  But  there  is  a  way 
out.  You  have  to  do  a  simple  thing.  Just  right  click  on  the  layer 
that  has  the  motion  Tween  so  that  the  entire  timeline  area  from 
1st  to  last  keyframe  area  gets  selected.  Now  with  your  mouse 


5 

10        15        20        25        0)  35 

^__j_reace  motion  I  weeri^ 
Create  5hape  Tween 

Insert  Frame 
Remove  Frames 

Insert  Keyframe 
Insert  Blank  Keyframe 
Clear  Keyframe 
Convert  to  Keyframes 
Convert  to  Blank  Keyframes 

1  ft 

H  [ 

Create  Motion  Tween  option 


right  click  on  the  selected  part  and  choose  the  option  "Convert 
To  Key  Frames"  You  will  see  that  the  arrow  of  the  motion  Tween 
will  get  converted  to  Key  Frames.  Now  delete  the  guide  layer. 
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Even  after  the  deletion  you  will  find  that  the  trajectory  is  main- 
tained by  the  object.  Now  right  click  on  the  layer  and  choose 
Mask  too  use  it  as  a  masking  object. 
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Working  With 
Sounds  And  Video 


T   A   '▼hat  would  animations  be  without  sounds.  Similarly,  you're 
\/\/  not  just  creating  animations  in  Flash,  in  fact  you  can  also 
T    V   use  video  content  in  your  Flash  movie  to  make  a  really  inter- 
active animation  or  presentation. 

8.1  Using  Sounds 


Can  you  imagine  of  a  film  without  any  background  music?  Even  in 
the  earlier  days  when  we  used  to  have  silent  movies,  the  back- 
ground music  was  used  according  to  the  situation.  Chaplin  Movies 
are  the  best  examples  of  these  movies.  So  no  one  can  argue  about 
the  necessity  of  sounds  in  a  visual  presentation. 

Flash  also  allows  playing  sound,  and  you  can  import  sounds 
and  play  it  in  the  background. 

Importing  A  Sound 

Like  bitmap  images,  sounds  can  be  imported  easily  from  the 
import  option.  Click  on  File  >  Import  >  Import  to 
Stage/ Import  to  Library  to  import  an  MP3  or  WAV  sound. 
Once  the  sound  is  imported  it  is  stored  in  the  library.  You  can  place 
the  sound  in  the  timeline  by  selecting  the  file  from  the  dropdown 
list  labeled  as  sound  in  the  properties  dialog  box.  You  can  also  drag 
the  sound  to  the  stage  from  the  library.  After  the  sound  is  import- 
ed you  will  see  the  sound  waves  are  visible  in  your  Timeline. 

After  you  select  the  sound  file,  you  can  add  effects  from  the 
Properties  Inspector  itself.  For  stereo  sound  you  can  use  left  chan- 
nel or  right  channel  and  even  create  fade  in  and  fade  out  effect 
with  the  sound  file.  You  can  also  click  on  the  Edit  button  to  edit  it 
manually. 
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Sound: 
Effect: 

Sync: 


Left  channel 
Right  channel 
Fade  left  to  right 
Fade  right  to  left 
Fade  in 
Fade  out 
Custom 


None 


Edit. 


Event 

V 

Repeat 

V 

1 

44  kHz  Stereo  16  Bit  13.6  s  2393.2  kE 


Effects  of  sound  in  Properties  Inspector 

None 


Left  Channel/ 
Right  Channel 


If  you  select  this  option  then  there  will  be 
no  effect  in  the  sound.  You  can  select  this 
option  to  remove  all  the  effects  that  you 
have  applied  earlier. 

Specifies  the  channel  for  a  stereo  sound. 


Fade  Left  To  Right/  Indicates  the  direction  of  fading 
Fade  Right  To  Left   in  or  fading  out 


Fade  In 


Starts  with  a  low  volume  and  increases  with 
respect  to  time  and  reaches  the  defined 
volume. 


Fade  Out 


Starts  with  a  defined  volume  and  decreases 
to  the  lowest  as  the  sound  ends. 


Custom 


Enables  to  define  the  fade  in  and  fade  out 
pointed  by  the  developers  according  to 
their  choice. 
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You  can  repeat  the  sound  for  a  fixed  number  of  times  depend- 
ing on  the  value  you  assign  for  repeat  option  and  also  play  in  a 
never  ending  Loop. 

You  can  synchronize  the  sound  with  the  animation  from  the 
sync  options.  The  sync  options  that  are  available  in  the  drop  down 
menu  are  as  follows: 


Event 

This  option  helps  to  synchronize  the  sound  with  an  event. 
Irrespective  of  the  Timeline  or  the  duration  of  a  SWF  file  the  Event 
sound  goes  on  playing  once  it  is  started.  But  if  there  are  more  than 

one  sound  the  Event  Sounds  get 
mixed. 


5ync: 


Event 


Event  Sync  option 
Start 

Start  is  very  similar  to  the  Event  Sound  apart  from  the  fact  that  no 

new  instance  of  the  sound  is  played 
if  we  have  a  sound  which  is  already 
playing. 


Stop 

Stop,  as  the  name  indicates,  stops 
the  sound  that  is  being  played. 


Sync: 

Start 

V 

Start  Sync  option 

Sync: 

Stop 

V 

Stop  Sync  option 

Sync: 

Stream 

V 

Stream 

Unlike  Event  Sound,  Stream  sounds 
play  only  up  to  that  duration  till 
which  the  sound  has  occupied  the 
Stream  Sync  option  Timeline.  A  Stream  sound  stops 

immediately  when  the  swf  file  stops.  Stream  Sounds  are  generally 
used  in  Websites  and  in  voice  over  for  character  animation. 
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8.2  Working  with  Video 


The  distribution  of  your  video  decides  on  how  you  make  up  your 
video  content 


and  incorpo- 
rate them. 
Integration  of 
video  into 
Flash  can  be 
done  in  the 
following 
ways: 


Deployment 

How  would  you  like  to  deploy  your  video? 

®  Progressive  awebserver 

'  r    .  it  1-1!    i  - 1   ii  1  1. 1 1  ii  ii               1     I  i 

1 . 1 5ti  e  am  ft  c                     arnmg  Service 

O  Stream  from  Flash  Media  Server 

-rogiessivs        Video       ery       :/oi.  stream  he 
/idee  using     TP  stream  iq    his  o;  :    .  .       ft  ■  .  : 
■  file  "   

i           :-:     uploai  I  ie  S        deo :  :     a  » 
server  manually     lis  op;     always    «  ■ 
component  on  stage. 

m  ale  de  ;  *  video  ;   died  ,  '•'•■:>', 

O  Embed  video  in  SWF  and  play  in  timeline 

Linked  Qui-  QuickTime 

Video  options  in  Flash 


Streaming  Video  Content 

Flash  Media  server  is  a  server  solution  that  is  modified  to  carry 
out  the  steaming,  real-time  media.  The  imported  video  clips  that 
are  stocked  up  into  the  Flash  documents  and  uploaded  to  the 
server  make  the  task  easy  for  assembling  and  developing  the 
Flash  document.  If  you  can  use  the  new  FLVPlayback  component 
or  the  ActionScript  then  you  will  get  a  controlled  video  playback 
and  it  would  also  provide  you  spontaneous  control  so  that  you 
can  communicate  with  the  video.  Adobe  has  come  into  partner- 
ship with  several  content  delivery  network  (CDN).  These  networks 
promise  you  reliable  network  and  also  provide  you  hosted  servic- 
es that  deliver  you  with  on-demand  Flash  video  of  high  perform- 
ance level.  FVSS  no  doubt  provides  the  best  way  to  deliver  Flash 
Video  to  a  large  number  of  audiences  exclusive  of  taking  any 
headache  of  setting  up  and  maintain  your  own  streaming  server 
hardware  and  network.  FVSS  is  built  up  with  Flash  Media  Server 
and  is  combined  directly  for  delivering,  tracking  and  reporting 
infrastructure  of  CDN  network. 


Progressively  Downloading  Video  From  A  Web  Server 

Suppose  you  don't  have  any  contact  or  connection  with  FVSS  or 
Flash  Media  Server,  what  will  you  do?  For  this  you  can  download  the 
video  from  an  external  source  while  you  use  progressive  download- 
ing. Progressively  downloading  provides  far  better  service  in  com- 
parison to  Flash  Media  Server.  As  for  an  instance  Progressively  down- 


HEH  FAST  TRACK 


85 


VIII 


WORKING  WITH  SOUNDS  AND  VIDEO 


FLASH  CS3 


loading  a  video  clip  from  a  Web  server  does  not  provide  you  the 
same  real-time  span  for  the  performance  that  Flash  Media  Server 
does,  but  you  can  comparatively  use  large  video  clips  and  minimize 
the  published  SWF  files.  Now  to  check  out  the  video  playback  and 
provide  intuitive  controls  for  users  to  interact  with  the  new  video, 
it's  good  to  use  the  new  FLVPlayback  component  or  ActionScript. 

Importing  Embedded  Video 

The  video  clips  that  you  import  into  Flash  is  referred  as  the  embed- 
ded files  which  can  be  inserted  as  required.  These  files  which  we 
can  insert  is  nothing  different  from  the  Flash  document,  it 
becomes  a  part  of  the  document.  Only  due  to  this  you  can  import 
short-duration  video  clips. 

Importing  Video  In  QuickTime  Format 

You  cannot  import  video  clips  in  any  other  format  except  Quick 
Time  format  as  the  linked  files.  Those  Flash  documents  which 
comprise  of  the  linked  QuickTime  video  should  not  be  published 
in  any  other  format  other  than  the  QuickTime  format.  Remember 
a  linked  video  file  does  not  become  a  part  of  Flash  document,  but 
this  document  maintains  a  pointer  to  the  linked  file. 

Importing  FLV  files  In  The  Library 

Always  remember  to  import  video  clips  in  Flash  Video  (FLV)  format 
directly  into  Flash.  Generally,  when  you  import  FLV  files  use  the 
encoding  options  that  are  already  applied  to  the  files. 

Using  the  FLVPlayback  component 

Using  the  FLVPlayback  component  helps  you  to  quickly  add  a  full- 
featured  FLV  or  mp3  playback  control  to  your  Flash  movie  and  apart 
from  this  it  also  offers  you  support  for  both  the  progressive  down- 
loading and  streaming  FLV  files.  These  FLV  files  make  your  work 
easy  to  create  intuitive  video  controls  for  the  users  to  regulate  the 
video  playback.  Besides  this  FLV  files  also  let  you  to  apply  pre-made 
skins  or  enforce  your  own  custom  skins  to  the  video  interface. 
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ActionScripts 

Here's  where  we  introduce  you  to  Flash  scripting.  If  you  ever 
want  to  be  able  to  make  professional  grade  Flash  animations, 
you  will  not  be  able  to  without  understanding  ActionScripts. 
This  chapter  aims  to  get  you  familiar  with  the  basics. 

9.1  An  Outline  Of  The  Script  Window 


While  working  with  scripts  we  often  need  to  import  external 
script  files  into  our  application.  We  do  it  by  using  the  Script  win- 
dow. We  can  create  external  script  files  and  import  it  into  our 
application  by  using  the  Script  Window.  Here  we  can  work  with 
ActionScript,  Flash  JavaScript  and  with  Flash  Communication.  The 
language  elements  that  are  used  to  create  scripts  or  the  elements 
that  we  type  in  the  scripts  are  listed  in  the  Add  ( + )  menu. 


J  Actions  -  Frame  x  j_ 


ActionScript  1.0  &2.0 


_aj  Global  Functions 

(*])  ActionScript  2.0  Classes 

Global  Properties 

Operators 

Statements 

Compiler  Directives 

Constants 
[*])  Types 

Deprecated 

Data  Components 

Components 

Screens 
[ijj  Index 


□  \M  Current  Selection 

0  actions  :  Frame  1 


<  I 

ITa 


1 

global . hits  =  0; 

2 

global. misses  =  0; 

3 

global. shots  =  0; 

4 

global . cDepth  =  100; 

5 

global . level  =  1; 

6 

var  xSpeed: Number  =  3 ; 

7 

var  stageWidth: Number  =  550; 

3 

var  stageHeight : Number  =  580; 

9 

this  .  attachHovie  (  "crosshair  nic 

"cr 

10 

House . hide ( ) ; 

11 

var  mouseListener : Ob ject  =  new 

Objec 

12 

mouseListener . onMouseMove  =  function 

13 

crosshair  nic.   x  =  xniouse; 

14 

crosshair  nic.   y  =  ymouse; 

15 

} ; 

actions :  1  Ma 


Line  15  of  135,  Col  3 


The  Script  window 


Let  us  see  how  we  can  create  an  external  file  in  the  script  win- 
dow. Go  to  File  >  New,  and  create  a  new  file. 
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Now  we  need  to  select  the  external  file  type  that  we  want  to 
create.  The  options  that  available  here  are:  ActionScript  file, 
ActionScript  Communication  file  and  Flash  JavaScript  file. 

On  the  top  of  the  script  window  some  tabs  can  be  seen.  These 
tabs  indicate  the  external  files  that  are  opened  presently.  The  tabs 
display  the  files  names  that  are  opened  while  working  with  mul- 
tiple files. 

Now  let's  see  the  features  that  can  be  used  in  the  Script  win- 
dow. The  features  include  the  following  options:  Add  (  +  ) 
menu,  code  hinting,  code  collapse,  code  commenting  ,  Find  and 
Replace,  Auto  format,  Syntax  checking,  Syntax  coloring  Word 
wrap,  Debug  options. 

The  Add  ( + )  menu  is  just  the  same  as  the  Actions  Toolbox.  The 
Debug  options  are  only  applicable  for  the  ActionScript  files. 

But  this  isn't  all  there  is  to  the  Script  window.  It  also  displays 
the  line  numbers  and  the  hidden  characters.  There  are  some 
limitations  of  the  Script  window  as  well,  and  various  code  assis- 
tance features  are  also  available  here.  The  code  assistance  fea- 
tures indicate  the  Script  navigator,  Script  Assist  mode  and 
Behaviors.  These  options  are  not  required  to  create  an  external 
script  file,  but  while  creating  an  FLA  file  these  are  essential. 

9.2  Actions  Panel  And  Script  Window  Tools 


The  code  assistance  features  can  easily  be  accessed  through  the 
Toolbars  of  the  script  window  and  the  Actions  panels.  These 
Toolbars  and  panels  help  make  things  easier,  and  also  help  to 
update  coding  in  ActionScript.  The  Toolbars  of  the  Actions  panel 
are  different  from  the  Toolbars  of  the  Script  window. 


Add  A  New  Item  To  The  Script 

Various  language  elements  are  displayed  in  The  Add  A  New  Item 
To  The  Script.  These  language  elements  are  also  displayed  in  the 
Actions  Toolbox.  Here  we  need  to  select  our  desired  element  in 
order  to  add  it  into  our  script. 
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Find  & 

The  function  of  this  Find  option  is  just  the  same  as  the  Find  and 
Replace  option  of  other  software  like  MS  Word,  Dreamweaver,  etc. 

It  can  find  the  text  that  is  to  be  deleted  or  modified  from  a 
script,  and  it  can  replace  this  text  with  a  new  word.  Like  we  said, 
this  of  this  as  a  Find/Replace  tool  for  code  like  that  in  MS  Word. 


Insert  Target  Path  L®. 

This  option  is  available  only  in  the  Actions  panel.  You  can  set 
an  absolute  or  a  relative  target  path  for  a  particular  action  in 
the  script. 


Check  Syntax 

This  option  is  used  to  check  the  errors  that  occur  in  the  syntax  of 
the  current  script.  These  Syntax  errors  appear  in  list  form  in  the 
Output  panel. 


Auto  Format  L^. 


You  might  face  problem  in  coding  syntax.  Sometimes  you  insert 
what  looks  like  a  proper  code  string,  but  the  script  refuses  to  run. 
The  Auto  Format  option  is  the  best  available  option  here.  You  can 
format  your  script  by  using  this  Auto  Format  option,  and  at  the 
same  time  improve  the  readability  of  the  code.  You  can  set  the 
Auto  formatting  option  from  the  Preference  dialog  box.  To  reach 
this  Preference  dialog  box,  select  the  Preference  option  from  the 
Edit  drop  down  menu.  You  can  also  reach  this  option  from  the 
Actions  panel  menu. 


Show  Code  Hint  l^L 


While  inserting  a  script,  you  may  need  a  wizard  to  help  you  find 
the  correct  syntax  or  hints.  If  you  have  unchecked  the  automat- 
ic code  hint  option,  then  you  will  need  to  click  on  this  button  to 
get  help. 


Debug  Options 

This  option  is  available  in  the  Actions  Panel  only.  This  Debug 
Option  helps  to  set  and  remove  breakpoints.  This  is  necessary  as  it 
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evaluates  and  debugs  the  code  line-by-line.  You  have  to  remember 
that  you  cannot  use  this  option  in  ActionScript  Communication 
and  in  Flash  JavaScript,  as  it  works  only  in  ActionScript  files. 


Collapse  Between  Braces 

Sometimes  a  code  appears  between  the  parenthesis  or  between 
the  curly  braces.  This  code  may  contain  the  insertion  point,  and 
can  be  collapsed  by  using  this  Collapse  Between  Braces  option. 


Collapse  Selection  Li 

The  Collapse  Selection  is  one  of  the  most  useful  options  that  are 
available  here.  It  can  collapse  the  code  block  that  is  currently 
selected. 


Expand  All  ll_ 


Suppose  you  have  collapsed  codes  to  work  more  swiftly,  and  to  be 
able  to  view  more  of  the  code  you're  working  on,  but  now  need  to 
look  at  code  that  you  collapsed  earlier.  The  Expand  All  option  will 
show  you  all  your  code  in  all  its  glory. 


Apply  Block  Comment  ^_ 


The  Apply  Block  Comment  adds  comment  markers  both  at  the 
beginning  and  at  the  end  of  the  code  block  that  is  selected.  So  you 
can  add  explanations  for  your  code  here,  or  just  prevent  certain 
lines  of  code  from  running. 


m 

Apply  Line  Comment 

The  Apply  Line  Comment  is  one  of  the  important  features  that  can 
add  a  single  line  comment  marker  at  the  insertion  point.  It  can 
also  add  a  single  line  comment  at  the  beginning  of  each  line  of 
code  in  a  complex  section. 


3 

Remove  Comment  ^_ 


We  can  use  this  Remove  Comment  option  to  remove  comment 
markers  from  the  current  line.  It  can  also  remove  comment  from 
all  lines  of  the  current  section. 
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Show/Hide  Toolbox 

Like  Find  and  Replace  option  this  Show/Hide  Toolbox  is  also  a  com- 
mon feature  that  is  often  found  in  other  software.  This  Show/Hide 
Toolbox  is  used  to  display  or  hide  the  Actions  Toolbox. 


.  .  :,\  Script  Assist 

Script  Assist  I  ^   

This  Script  Assist  option  is  also  found  only  in  Action  Panel.  In  this 
Script  Assist  mode  you  will  find  a  user  interface  that  is  extremely 
helpful  to  enter  elements  that  are  needed  in  order  to  create  script. 


Help 

The  Help  is  also  a  very  common  tool  for  most  of  the  users.  The 
Help  displays  various  reference  materials  for  the  users.  This  is 
extremely  important  those  of  you  who  are  not  familiar  with 
ActionScript.  You  can  select  a  particular  ActionScript  element  and 
then  all  the  information  regarding  the  selected  script  element  are 
displayed  in  the  Script  window.  You  can  just  click  on  the  particu- 
lar element  of  script  and  then  click  on  Help  and  here  all  the  infor- 
mation that  are  available  will  appear  in  the  Help  panel. 


Panel  Menu 

The  Panel  menu  can  only  be  found  in  the  Actions  panel.  This  Panel 
menu  includes  some  commands  and  preferences  that  can  be 
applied  to  the  Actions  panel.  Here  you  can  set  the  line  numbers  of 
the  scripts.  You  can  also  set  the  word  wrapping.  The  ActionScript 
preferences  can  also  be  accessed  through  the  Panel  menu.  In  order 
to  import  or  export  scripts  you  can  use  this  Panel  menu. 


9.3  Set  ActionScript  Preferences 

While  scripting  it  is  always  a  good  idea  to  set  and  modify  a  single 
set  of  preferences.  It  is  extremely  helpful  to  edit  codes  both  in 
Actions  Panel  and  in  Script  window. 

Let's  take  a  look  at  how  you  can  set  ActionScript  preferences.  If 
you  are  working  in  Windows  then  you  can  go  to  Edit  > 
Preferences.  In  the  Preferences  dialog  box,  under  the  Category 
list,  a  lot  categories  are  available,  such  as,  General,  ActionScript, 
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Auto  Format,  Clipboard,  Drawing,  Text,  Warnings,  PSD  File 
Importer,  AI  File  Importer.  Click  on  the  ActionScript  option. 

If  you  are  working  on  a  Macintosh,  you  need  to  go  to  Flash  > 
Preferences. 

You  will  see  the  ActionScript  Preferences  dialog  box: 


Category 


General 

Auto  Format 
Clipboard 
Drawing 
Text 

Warnings 

PSD  File  Importer 

AI  File  Importer 


ActionScript 


Editing:  0  Automatic  indentation 
Tab  size:  4 


0  Code  hints 
Delay:  J 


Font:    Courier  New 


v    10  v 


QlJse  dynamic  font  mapping 


Open/Import:  UTF-8  Encoding 


Save/Export:  UTF-8  Encoding 


Reload  modified  files:  Prompt 


Syntax  colors:  0  Code  coloring 
Foreground:  |l 

Keywords:  H 


Background:  |  ~| 
Comments:  H 
Strings:  H 


Language:     ActionScript  2,0  Settings, , 


ActionScript  3,0  Settings,,,  ~] 


Reset  to  Defaults 


ActionScript  Preferences  dialog  box 


Automatic  Indentation 

This  Automatic  Indentation  option  is  available  at  the  top  of  the 
Preferences  dialog  box.  If  you  check  this  option,  then  the  text  that 
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Editing:  0  Automatic  indentation 


you  insert  after  open- 
ing curly  braces  or 

.„  u    Automatic  indentation  option 

parenthesis,  will  be 

indented  automatically  according  to  the  Tab  Size. 


Tab  Size 

In  the  Tab  Size  field  you  can  mention 
the  number  of  characters  that  a  new 
line  will  be  indented  by. 


Tab  size: 

Tab  size  option 


[^1  Code  hints 


Code  Hints 

The  Code  Hint  check  box  appears  just 
after  the  Tab  Size  option.  If  you  check 
on  this  option  then  it  will  allow  code  Code  hints  °Ption 
hinting  in  the  Script  window. 


Delay 

Here  you  can  Specify  the  delay  (in  seconds)  before  the  required 
code  hints  are  displayed.  The  units  are  measured  in  seconds. 


Delay:  ^ 

0  seconds 

Delay  option 
Font 

You  can  select  your  desired  font  for  the  script  from  the  drop  down 
menu  of  the  Font.  The  Font  Size  can  also  be  mentioned  in  the  box 
just  beside  the  Font  option. 


Courier  New 

V 

10 

V 

Font  option 


Use  Dynamic  Font  Mapping 

Another  check  box  can  be  seen  just  under  the  Font  option.  This  is 
the  Use  Dynamic  Font  Mapping  check  box  option.  It  is  used  to  make 
sure  that  the  selected  font  can  render  each  and  every  character.  If 
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I  I  Use  dynamic  font  mapping 

Fig  1025:  Use  dynamic  font  mapping  option 

you  find  it  difficult  to  render  a  special  character,  Flash  can  substi- 
tute it  with  a  font  family  that  does  contain  your  desired  character. 

Open/Import 

Just  below  the  Use  dynamic  font  mapping  option  the  Open/Import 
option  can  be  found.  There  are  two  options  in  the  drop  down 
menu:  UTF-8  Encoding  and  the  Default  Encoding.  It  can  specify 


Open/Import: 

UTF-3  Encoding 

v 

Open/import  option 


the  character  encoding  that  is  used  when  you  open  of  import  the 
files  that  are  based  on  ActionScript. 

Save/Export 

The  Save/Export  option  can  be  found  just  after  the  Open/Import 
option.  In  this  drop  down  menu  also  two  options  can  be  found: 
UTF-8  Encoding  and  Default  Encoding.  This  option  can  specify  the 


5ave/Export: 

UTF-3  Encoding 

v 

Save/Export  option 


characters  encoding  that  are  used  while  saving  and  exporting  the 
ActionScript  files. 


Reload  Modified  Files 

Below  the  Save/Export  option  the  Reload  Modified  Files  option  can 


Reload  modified  files: 

Prompt 

v 

Reload  modified  files  option 
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be  found.  There  are  three  options  in  the  drop  down  menu  of  this 
option:  Always,  Never,  and  Prompt. 

Always:  If  this  Always  option  is  selected  as  the  Reload  modified 
files  attribute  then  the  file  will  automatically  be  reloaded  and  no 
warning  message  will  be  displayed. 

Never:  If  this  Never  option  is  selected  as  the  Reload  modified 
files  then  the  file  will  be  in  the  current  state.  Here  also  you  will 
not  get  any  warning  message. 

Prompt:  This  is  the  default  option  of  the  Reload  modified  files 
attribute.  Here  a  warning  message  will  be  displayed.  Here  you  can 
select  your  desired  location  where  you  can  reload  the  file. 

You  can  avoid  overwriting  a  script  while  developing  the  appli- 
cations that  include  external  scripts  by  using  this  option  of 
Preference  dialog  box.  The  overwriting  is  possible  if  any  one  before 
you  edits  and  modifies  the  script  by  inserting  a  few  more  scripts. 
This  option  also  immensely  helpful,  as  you  can  avoid  publishing  a 
script  with  the  existent  older  version  of  the  file.  The  alert  message 
enables  to  close  a  script  automatically  and  to  reopen  the  modified 
version  of  the  script. 

Syntax  Colors 

After  the  Reload  modified  files  option,  the  next  is  the  Syntax  col- 
ors. Here  also  you  can  see  a  check  box.  Here  you  will  see  six  sub 
options:  Foreground,  Background,  Keyword,  Comments, 
Identifiers,  and  Strings.  Here  the  colors  palette  of  the  Foreground 
and  the  Background  remain  always  open.  The  Colors  palette  of  the 
other  option  can  only  opened  if  you  check  on  the  Syntax  Colors 


Syntax  colors:  0  Code  coloring 

Foreground: 

el 

Background: 

a 

Keywords: 

■si 

Comments: 

Identifiers: 

■il 

Strings: 

Syntax  colors  options 
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check  box.  From  the  Colors  palette  you  can  choose  your  desired 
colors  for  the  respective  options.  These  selected  colors  of  the  codes 
will  appear  in  the  script.  This  is  immensely  helpful  as  the  differ- 
ent codes  can  easily  be  identified  through  the  different  colors. 

Language 

In  the  Language  section,  you  can  see  two  buttons  indicating  two 
ActionScript  language:  ActionScript  2.0  and  ActionScript  3.0. 
Here  the  ActionScript  setting  dialog  box  will  be  opened. 


Language:     ActionScript  2.0  Settings. 


ActionScript  3.0  Settings. 


Language  options 


After  setting  all  these  preferences  you  need  to  click  on  the  OK 
button. 


9.4  Script  Assist  mode 


The  Script  Assist  mode  is  an  excellent  wizard  to  help  those  of  you 
who  are  novices  with  ActionScript.  Here  you  do  not  need  to  be  a 
scripting  expert.  You  can  easily  add  interactivity  to  the  file  with- 
out knowing  anything  about  the  language  and  the  syntax  of  the 
ActionScript. 

From  the  Actions  Toolbox  you  can  select  your  desired  interac- 
tivity and  add  it  to  the  file. 

To  open  the  Actions  panel  you  need  to  click  on  the  Window 
option  in  the  Menu  bar.  Here  a  drop  down  menu  will  appear.  From 
this  drop  down  menu  you  have  to  select  the  Actions  option.  You 
can  also  press  [F9]  to  open  the  Actions  panel.  To  open  the  Script 
Assist  mode  you  can  click  on  the  Script  Assist  button. 

If  you  click  on  a  particular  item  then  a  description  will  appear 
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at  the  upper  right  corner  of  the  panel.  Here  you  can  drag  and  drop 
the  item  or  you  can  double-click  on  the  respective  item  to  add  it  to 
the  FLA  file. 

This  panel  also  helps  to  avoid  script  errors.  All  kinds  of  Syntax 
errors  and  logic  errors  can  be  avoided  by  using  this  panel. 

9.5  Using  Script  Assist  To  Insert  ActionScript 


Let  us  see  how  we  can  use  this  Script  Assist  mode  to  insert 
ActionScript.  To  insert  an  action  of  ActionScript  3.0  we  must  have 
to  attach  a  Flash  file  first  to  frame.  While  using  the  ActionScript 
2.0  we  can  attach  the  script  to  a  button  or  to  a  movie  clip  or  to  a 
frame  in  the  Timeline. 

Flash  can  assemble  the  codes  in  the  Actions  panel  that 
includes  ActionScript  codes  when  you  click  on  the  buttons  of  the 
Script  Assist  mode.  The  script  may  create  problem  if  it  includes 
some  code  errors.  In  that  case  you  need  to  fix  the  current  code 
selection.  All  these  errors  are  usually  displayed  in  details  in  the 


Actions  -  Frame  x 

|  set  variable  :  Set  a  variable 

Global  Functions 
_*J  ActionScript  2.0  Classes 
[*]]  Global  Properties 
_aj  Operators 
_aj  Statements 
f*l  Compiler  Directives 
_aj  Constants 
[U  Types 
_aj  Deprecated 
f*l  Data  Components 
_aj  Components 
f*j  Screens 
[a]  Index 

Variable:  |  _global.hits 
Value:  |  0 

*T  =  js  ©  ^  v  m 

|  O  Expression 
|  0  Expression 

[\  Script  Assist  ] 

^9    global .misses  =  0; 

9    global . shots  =  □; 

M    global . cDepth  =  100; 
H_global.  level  =  1; 
Hvar  xSpeed: Number  =  3; 

.  i 

Dvar  st  age  Width:      rber  =  550; 

<  > 

-  @  Current  Selection  A 
 Q  actions  :  Frame  1  ~ 

0  actions  :  1  =fi| 

Line  1:  _global.hits  =  0; 

ActionScript  panel  in  Script  Assist  Mode 


Compiler  Errors  panel. 

Now  let's  see  how  you  can  add  an  action  to  the  script  pane. 
First,  you  have  to  select  a  Category  in  the  Actions  Toolbox.  This  is 
done  to  display  the  actions  under  the  selected  category.  Now  you 
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can  either  double-click  on  the  respective  option,  or  drag  and  drop 
the  action.  The  same  action  can  be  done  by  clicking  on  the  Add 
(  +  )  button,  and  then  you  can  select  an  action  from  the  menu. 

Like  adding,  deleting  is  also  easy.  To  delete  a  script,  first  you 
have  to  select  a  statement  in  the  script  window.  Then  you  need  to 
click  on  the  Delete  button  ( - ) . 

We  can  also  just  press  [Delete]  . 

Similarly,  you  can  move  a  code  easily.  To  do  this  you  need  to 
select  a  script  in  the  Script  window  and  then  click  the  Up  and 
Down  arrow  to  move  and  place  it  at  the  desired  spot. 

9.6  Behaviour 


/  Behaviors  X  [_ 


-  X 


Frame  1 


The  predefined  scripts  that  you  can  add  to  objects  in  an  FLA  file 
are  called  Behaviors.  The  functions  that  can  be  added  through 
behaviors  are:  controlling  the  stacking  order  of  movie  clips,  movie 
clip  dragging,  frame  navigation,  and  loading  external  SWF  and 
JPEG  files.  You  can  easily  avoid  writing  too  much  ActionScript  by 
using  these  Behaviors. 

These  Behaviors  are  not  available  in  ActionScript  3.0,  so  make 
sure  not  to  select 
ActionScript  3.0 
from  the  Preference 
dialog  box.  If  you 
select  ActionScript 
2.0,  all  the  Behaviors 
will  become  avail- 
able to  you. 

You  will  also  not 
be  able  to  access  the 
Behaviors  option 
when  working  with 
an  external  file 
script.  First,  select 
your  desired  trigger- 
Behaviors  Window 


L 


Data  ► 

Embedded  Video  ► 

Media  ► 

Movieclip  ► 

5ound  ► 

Web  ► 
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ing  object  in  your  document.  This  triggering  object  may  be  a 
movie  clip,  or  a  button.  Next,  you  have  to  select  Add  in  the 
Behaviors  panel,  and  then  you  can  select  behaviors  from  the  drop 
down  menu  that  appears. 


HM3  FAST  TRACK 


99 


IX 


ACTIONSCRIPTS 


FLASH  CS3 


9.7  ActionScript  2.0 


Introduction 

The  scripting  language  in  Flash  is  known  as  ActionScript. 
Although  there's  no  language  that  it  follows,  it's  similar  to  Object 
Oriented  Programming  Structure. 

ActionScripts  can  be  attached  to  the  frame  of  a  timeline,  to  a 
button  to  make  it  interactive  and  to  a  movie  clip.  ActionScript 
finds  its  use  in  developing  multimedia-based  software,  interac- 
tive CD  ROM  presentations,  complex  animations  and  many  other 
purposes. 

ActionScripts  are  availble  in  many  versions.  ActionScript  1,  2 
and  the  latest  version,  3.  ActionScript  3  is  basically  an  advanced 
version,  and  mainly  expert  programmers  work  with  it.  On  the 
other  hand,  ActionScript  2  is  comparatively  easy  to  understand, 
and  is  ideal  for  beginners.  Before  we  start,  let's  understand  the 
basic  difference  between  ActionScript  2  and  Action  Script  3. 

9.8  Differences  Between  ActionScript  2.0 
And  3.0 


The  Compile-time  type  checking  and  the  class-based  syntax  are  the 
main  features  of  ActionScript  2.  The  Class  based  syntaxes  are  noth- 
ing but  the  keywords  class  and  extends.  The  class  based  inheri- 
tance syntaxes  are  also  introduced  in  the  ActionScript  2.  This  is 
extremely  helpful  for  developers  as  they  can  easily  create  classes 
and  interfaces  in  ActionScript  2.  Previously,  it  was  possible  only  in 
Java  and  C++. 

ActionScript  3  is  the  updated  version  of  ActionScript.  It 
includes  not  only  the  features  of  ActionScript  2,  but  also  includes 
some  additional  features.  The  ActionScript  3  is  so  different  a 
scripting  language  that  a  completely  different  virtual  machine 
i.e.,  Flash  Player  9  is  required  to  run  the  script.  The  Flash  Player  9 
includes  two  virtual  machines.  AVM2  is  used  to  write  the  contents 
of  the  ActionScript  3. 
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Let  us  look  at  the  different  between  the  ActionScript  2  and  the 
ActionScript  3  in  details: 

By  using  Flash  CS3,  Flash  8  and  Flash  MX  2004  we  can  publish 
the  ActionScript  2  files  but  we  can  only  publish  the  files  of 
ActionScript  3  by  using  the  Flash  CS3. 

ActionScript  2  is  the  foundation  for  Flash  Lite  2  and  Flash  Lite  3 
that  are  used  in  mobile  phones.  The  external  .swf  files  that  are 
coded  with  ActionScript  2  can  be  loaded  by  ActionScript  3. swf  files. 

The  files  of  ActionScript  2  can  be  run  in  several  versions  of 
Flash  player  like  Flash  Player  7,  Flash  Player  8  and  Flash  Player  9. 
Files  created  with  ActionScript  3  can  only  run  in  Flash  Player  9— 
which  is  what  most  users  face  problems  with. 

Also,  since  most  users  find  it  easy  to  work  with  ActionScript  2, 
and  only  a  few  use  ActionScript  3,  we'll  stick  to  2  for  this  Fast 
Track.  Plus,  most  people  already  have  sites  based  on  ActionScript 
2,  they're  reluctant  to  upgrade.  Though  we  must  add  that  keeping 
yourself  updated  and  future-proof  means  that  once  you  have  mas- 
tered ActionScript  2,  you  should  learn  3,  as  it  will  not  only  help 
you  with  Flash,  but  also  with  Adobe  Flex. 

Like  all  other  scripting  languages,  ActionScripting  follows  con- 
ventions, which  means  developers  find  it  comfortable  to  work 
with,  and  designers  also  find  it  easy  to  handle  codes. 
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9.9  Adding  ActionScript 


Let  us  start  with  a  very  basic  Action  Script: 


10        15        20  25 


35        40        45        50  55 


fc|  g  Scene  1 


|  Workspace  T    fi.  4l 


PLAY 


STOP 


j  0  Properties  X  |  Filter,  |  F 

Tween:  Motion             v   0 Scale          Sound:  None 

© 
® 

>         Ease:    0         |v        [  Edit...   j             Effect:  None 

Label  type: 

Rotate:  Auto        v     0        times           sync:  Stream      v   Repeat       v    1  | 

& 

□  orient  to  path    0Sync    0Snap                 No  sound  selected 

An  Animation  controlled  by  ActionScript 

Suppose  you  have  a  ball  on  the  stage  that  moves  from  one  end 
to  the  other  with  the  help  of  Motion  Tween.  Now  you  want  to  con- 
trol the  animation.  So  you  create  two  buttons— Play  and  Stop. 

You  want  the  ball  to  start  moving  only  when  you  click  on  the 
Play  button,  and  will  stop  only  when  you  click  the  Stop  button. 

So  first,  you  have  to  stop  the  ball's  movement. 

To  do  this,  right-click  on  the  first  frame  of  any  layer  in  the 
timeline  and  select  Actions.  The  Action  dialog  box  opens. 

You  can  click  script  assist  as  that  will  help  you  while  writing 
the  scripts.  From  the  +  sign  above  choose  Global  Functions  > 
Timeline  Control  and  select  Stop. 


stop() ; 

Now  the  ball  will  not  move  any  more. 
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j  p_J  Global  Functions 

Movie  Clip  Control 
(JJ  Timeline  Control 

®  goto 
®  play 

®  stop 

®  stopAHSounds 
f*l  Browser/Network 
Printing  Functions 
'  sceila  ieoi  s  i  u  '  o  ■ 
[*}|  Mathematical  Functions 
f*l  Conversion  Functions 
Ad  onSt  rip  2,0  (  as : « ; 
Global  Properties 


|  stop  :  Stop  playing  the  m 


|"\  Script  Assist    |  ® 


ActionScript ; 
Global  Properties 
Operators 
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Now  select  the  Play  button  and  right-click  on  it. 
Keeping  the  script  assist  button  on,  click  on  the  +  sign  and 
from  Global  Functions  >  Timeline  Control  click  on  Play. 
You  will  get  a  script  some  what  like  this: 


on   (release)  { 
play()  ; 

} 


This  on  (release)  is  the  mouse  event,  and  it  means  that 
after  you  release  the  mouse  button,  the  action  Play  will  be  exe- 
cuted. 
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Similarly  for  the  Stop  button,  follow  the  same  step. 

on   (release)  { 
stop() ; 

} 

Now  if  you  play  the  animation  the  ball  will  not  move  initially. 
If  you  press  the  play  button  the  ball  will  start  rolling.  The  ball  will 
stop  as  you  click  the  stop  button. 

In  this  way  you  can  add  interactivity  to  your  Flash  Animation. 

Note:  The  mouse  event  which  is  on  (release)  in  this  case 
can  be  changed  to  any  other  event  like  on  (press  /  release  / 
releaseOutside  /  rollover  /  rollout  /  dragOver  / 
dragOut  /  keyPress  "<some  key>")  . 


9.10  Duplicate  Movie  Clip 


This  action  can  be  given  in  a  button  or  in  a  keyframe  of  a  Timeline 
depending  on  what  you  want. 

Say  you  have  a  ball  which  is  a  movie  clip  rolling  from  one  end 
of  the  stage  to  the  other.  You  give  it  an  instance  name  say  "aa". 

Say  you  want  a  button,  which  if  you  click  will  duplicate  the 
movie  clip.  So  you  have  to  create  a  button  and  place  it  in  a  differ- 
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ent  layer.  Now  right-click  on  the  button  and  choose  Actions. 

Keeping  the  Script  Assist  turned  on  choose  Global  Functions  > 
Movie  Clip  Control>  duplicateMovieClip. 

Now  you  have  to  give  the  instance  name  "aa"  in  the  Target 
name 

Assign  a  new  name  say  aal  in  the  New  name  section. 
Set  a  value  for  the  depth  which  separates  the  two  clips.  Here  I 
have  put  12. 

Now  your  script  is  ready  and  it  looks  somewhat  like  this 


on   (release)  { 
duplicateMovieClip ( "aa" ,    "aal" ,    12 )  ; 

} 


Play  the  movie  and  click  the  button.  You  will  see  the  movie  clip 
is  duplicated. 

Start  Drag 

Start  Drag  helps  to  attach  the  mouse  with  a  movieclip.  The  Movie 
Clip  moves  as  you  move  the  mouse. 


For  this  we  have  to  add  a  very  simple  script.  This  script  is  : 
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startDrag ( "aa" ,    true) ; 


Here  aa  is  the  name  of  the  movieclip  which  you  want  to  drag. 
"True"  means  the  mouse  will  be  locked  with  the  centre  of  the 
movie  clip. 


Set  Property 

If  we  want  to  change  the  property  of  any  movieclip  through  scripts 
you  use  this  Set  Property  action  Script.  You  can  change  properties 
like  alpha  (visibility),  height,  x  position,  y  position,  xscale,  yscale 
and  other  properties  through  this  script.  To  use  this  code  you  need 
a  movieclip  and  give  it  an  instance  name.  The  script  also  requires 
the  value  of  the  property  apart  from  the  instance  name. 


set Property ( "aa" ,   _alpha,    " 0 " ) ; 
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Set  Property 


From  this  script  it  is  well  understood  that  if  you  add  this  code  to 
a  particular  keyframe  then  at  that  instant  the  visibility  of  the  movie 
clip  whose  instance  name  is  aa  becomes  0.  That  means  it  becomes 
invisible  when  the  movie  clip  reaches  a  particular  keyframe. 

stopANSounds 

Flash  can  play  sounds  in  the  background  of  an  animation. But  you 
may  stop  all  these  sounds  by  a  single  click  of  mouse  on  a  button. 
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stopANSounds 


The  script  to  stop  all  the  sounds  is 


stopAll Sounds ( )  ; 
Fscommand 

This  command  helps  to  play  a  swf  file  in  full  screen  mode.  With 
the  help  of  fscommand  we  can  execute  some  other  functions  like 
quit ,  calling  an  executable  file  and  many  more. 
The  syntax  is  like  this 


fscommand ( " fullscreen" 


Atrue" 


fscommand  is  available  under  Global  Function  >  Browser 
Network  >  fscommand 


quit 


It  closes  the  projector 


fullscreen      true  or  false 


allows cale      true  or  false 


If  you  set  true  then  the  projector 
converts  in  full  screen  mode  and 
setting  the  parameter  false 
returns  in  the  normal  view 
False  sets  the  movie  to  the 
original  size  while  true  sets 
the  scale  to  the  100%  size  of 
the  player 
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fscommand  action 


showmenu     true  or  false 

exec  Path  to 

application 


True  shows  the  menu  of  the 
Flash  player  and  False  turns  it  off. 
The  application  is  executed  in 
a  projector 


Get  URL 

Get  URL  helps  to  connect  a  perticular  URL  when  you  clik  on  a  but- 
ton. 

on   (release)  { 
getURL ( "www . thinkdigit . com" ) ; 

} 

This  code  means  if  you  click  on  a  button  containing  this  script 
you  will  be  connected  directly  to  the  Web  site 
www.thinkdigit.com. 

window:String  [optional]  -  This  is  an  optional  property.  It 
specifies  the  window  or  HTML  frame  where  you  want  to  load  the 
document.  Either  you  have  to  put  a  specific  name  or  you  have  to 
choose  from  the  following  list. 

_self :  the  url  opens  in  the  current  frame  in  the  current  win- 
dow. 

_blank:  the  url  opens  is  a  completely  a  new  window. 
_parent:  the  url  opens  in  the  parent  of  the  current  frame. 
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loadVariables 

Esc+lv 

Conversion  Functions  ► 
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Get  URL 


_top:  the  url  opens  in  the  top-level  frame  in  the  current  win- 
dow. 

method  String  [optional]  -  This  is  also  an  optional  property.  A 
GET  or  POST  is  a  popular  method  for  sending  variables.  The  GET 
method  is  a  bit  unsecured  method  as  it  appends  the  variables  to 
the  end  of  the  UR.  GET  Method  is  generally  used  for  small  num- 
bers of  variables.  The  POST  on  the  other  hand  sends  the  variables 
in  a  separate  HTTP  header  and  is  thus  much  more  secured.  POST  is 
generally  used  when  we  are  sending  long  strings  of  variables. 

LoadMovie 

LoadMovie  syntax  is  used  when  you  want  to  call  a  SWF  file  from 
another  movie.  This  script  plays  a  vital  role  while  creating  inter- 
active presentations. 

on   (release)  { 
loadMovie ( "baby . swf " ,    "my_stage" ) ; 

} 

This  script  means  if  you  click  on  the  button  with  which  this 
script  is  attached  then  another  swf  file  called  baby .  swf  located  in 
the  same  directory  will  open.  The  second  part  i.e.  my_stage  is  the 
name  of  a  movieclip.  By  using  this  instance  name  in  the  script  we 
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loadMovie  :  Loads  a  SWF,  JPEG,  GIF  or  PNG  from  an  URL  into  a  movie  clip 
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Line  2:  loadMovieNum(""j  0); 


LoadMovie 

can  specify  that  the  baby .  swf  file  will  open  in  the  area  of  the 
movieclip.  Of  course  for  that  the  location  should  be  set  to  Target 
rather  then  Level. 


Unload  Movie 

In  our  previous  section  we  have  learnt  how  to  open  a  SWF  file 
inside  another  file.  Now  you  may  need  to  remove  the  file  after 
your  purpose  is  over.  Here  we  use  the  script  UnloadMovie. 


on   (release)  { 
unloadMovie ( "baby . swf " ) ; 
} 


This  script  clearly  indicates  that  if  you  click  on  the  particular 
button  to  which  UnloadMovie  script  is  attached  then  the  external 
swf  file  which  you  have  called  by  using  the  script  LoadMovie  will 
be  removed  from  the  stage. 


9.11  Variables 


Variable  is  a  common  concept  in  any  programming  or  scripting 
Language.  Before  we  start  discussing  the  use  of  Variable  in  Flash, 
let  us  understand  what  variables  are. 
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Variables  may  be  thought  of  a  container  that  holds  data  that 
can  be  used  later  on  as  and  when  necessary.  Suppose  you  are  stand- 
ing in  a  room  where  there  are  many  types  of  fruit.  You  have  an 
empty  basket  in  your  hand.  You  are  asked  to  transfer  the  fruit  to 
another  room.  So  you  start  with  apples  and  put  all  the  apples  in 
the  basket  in  order  to  take  it  to  a  different  room.  Your  basket  now 
contains  apples,  so  it  is  a  basket  with  apples.  Next  time  when  you 
load  the  basket  with  oranges,  it  becomes  a  basket  of  oranges. 
Similarly,  the  basket  varies  from  time  to  time  depending  on  what 
fruit  you  are  putting  inside  it.  So  it  can  be  termed  as  a  variable 
with  respect  to  the  object  kept  within  it.  Similarly  in  Flash  or 
other  programming  languages  we  can  assign  any  letter  or  word  as 
a  variable  and  we  can  assign  characters,  numeric  values  and  oth- 
ers inside  it. 

Variable  types 

String  Variables 

String  Variables  holds  characters.  The  characters  may  be  single  or 
multiple.  String  variables  may  also  contain  digits,  but  in  that  case 
the  digits  will  not  be  treated  as  integers.  That  means  you  cannot 
carry  out  mathematical  operations  using  those  integers.  The  dig- 
its will  look  like  numbers  but  will  be  treated  as  characters.  As  for 
example,  the  variable  item  could  hold  the  value  "computer".  The 
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quotes  ("  ")  are  required  to  define  the  value  as  a  string 
Example  of  a  string  variable 
item  =  "computer  w; 
Number  Variables 

A  number  variable  as  the  name  suggests  holds  numbers  which  are 
treated  as  integers.  You  can  do  mathematical  operators  and  func- 
tions using  these  number  variables.  Here  no  quotes  ("  ")  are 
required  as  these  variable  does  not  contain  characters. 

Examples  of  Number  Variables 

numl  =  100; 

Boolean  Variables 

A  Boolean  variable  store  logical  condition  like:  true  or  false.  For 
example,  you  can  use  a  boolean  variable  while  storing  the  login 
state  of  a  user. 

Example  of  Boolean  Variable 

user_logged  =  true; 
user_logged  =  false; 


Application  Of  Variables  in  Flash 

Additions  of  two  values 

We  can  use  the  concept  of  variable  in  Flash  and  can  find  the  sum 
of  two  values  using  Action  Script.  Follow  these  simple  steps  and 
see  the  output. 

•  Open  a  new  Flash  file  (ActionScript2) 

•  Insert  a  new  layer. 

•  Rename  this  layer  as  "Captions". 

•  Take  the  Text  Tool  from  the  Tool  box 

•  In  the  first  keyframe  type  "Type  1st  Number". 

•  Click  on  the  Selection  Tool. 
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•  Click  on  the  2nd  frame. 

•  Press  [F7  ]  to  insert  a  blank  keyframe. 

•  Again  select  the  Text  Tool. 

•  Now  type  "Type  2nd  Number". 

•  Now  click  on  the  3rd  frame. 

•  Press  [F7]  once  again. 

•  Type  "The  Result  is:" 

•  Lock  the  Captions  layer. 

•  Now  insert  another  new  layer. 

•  Rename  this  layer  as  "Text  box". 

•  Select  the  Text  Tool  once  again. 

•  Open  the  Properties  Inspector. 

•  Here  select  the  Text  type  as  'Input  Text'. 

•  Now  set  the  Font  type  as  Arial,  size  as  24,  and  color  as  black. 

•  Turn  on  the  bold  option. 

•  Set  the  alignment  as  Center. 

•  Now  click  on  the  stage  to  create  an  input  text  box. 

•  Set  the  position  of  the  input  text  box  with  the  help  of  the 
Selection  Tool. 

•  Now  click  on  the  1st  frame  of  the  Text  box  layer. 

•  Press  [F6  ]  twice  to  insert  keyframes. 

•  Move  back  to  the  frame  1. 

•  Click  on  the  input  text  box. 

•  Go  to  the  Properties  Inspector  and  in  the  Var  text  field  type 
"intl". 

•  This  Var  is  the  variable  name. 

•  Now  go  to  2nd  frame  and  click  on  the  input  text  box  to  select 
it. 

•  In  the  Properties  Inspector,  type  "int2"  in  the  'Var'  text  field. 

•  Now  move  to  3rd  frame. 

•  Again  click  on  the  input  text  box  once  to  select  it. 

•  Type  "int3"  as  'Var'  text  field  in  the  Properties  Inspector. 

•  Now  lock  the  layer. 

•  Insert  another  new  layer. 

•  Rename  it  as  "Buttons". 

•  Select  the  Text  Tool. 

•  Now  set  the  Text  type  as  'Static  Text'. 
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•  Set  the  font  color  as  red  and  size  as  70. 

•  Turn  off  the  bold  option. 

•  Now  type  "+". 

•  Click  on  the  Selection  Tool. 

•  Press  [F8  ]  to  convert  the  text  as  symbol. 

•  The  Convert  to  Symbol  dialog  box  opens. 

•  Type  "Buttonl"  as  symbol  name. 

•  Choose  the  symbol  type  as  Button. 

•  Click  on  OK. 

•  Double-click  on  the  button  to  enter  its  timeline. 

•  Click  on  the  'Hit'  frame. 

•  Press  [F6]. 

•  Select  the  Rectangle  Tool. 

•  Draw  a  rectangle  over  the  (plus)  +  sign 

•  Move  back  to  Scene  1. 

•  Now  click  on  the  2nd  frame. 

•  Press  [F7  ]  to  insert  a  blank  keyframe. 

•  Again  select  the  Text  Tool. 

•  This  time  type  "=". 

•  Click  on  the  Selection  Tool. 

•  Press  [F8]. 

•  Type  "Button2"  as  symbol  name. 

•  Click  on  OK. 

•  Again  double  click  on  the  button  to  enter  its  timeline. 

•  Click  on  'Hit'  frame  and  press  [F6  ] . 

•  Select  the  Rectangle  Tool. 

•  Draw  a  rectangle. 

•  Go  back  to  Scene  1. 

•  Click  on  the  3rd  frame. 

•  Press  [F7]. 

•  Now  move  to  the  1st  frame. 

•  Click  on  the  button  once  to  select  it. 

•  Open  the  Actions  Panel. 

•  Add  this  script: 

on   (release)  { 
a  =  intl; 
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gotoAndPlay (2) ; 

} 

•  Now  move  to  the  2nd  frame. 

•  Click  on  the  button. 

•  In  the  Actions  Panel  add  this  script: 

on   (release)  { 
b  =  int2; 
gotoAndPlay (3)  ; 

} 

•  Now  lock  the  layer. 

•  Insert  a  new  layer. 

•  Rename  it  as  "Actions". 

•  Right  click  on  the  1st  frame. 

•  Select  Actions  from  the  list. 

•  In  the  Actions  Panel  add  this  script: 

var  a  =  0; 

var  b  =  0 ; 

var  c  =  0; 
stop() ; 

•  Now  click  on  frame  2. 

•  Press  F6. 

•  In  the  Actions  Panel,  add  this  script: 
stop() ; 

•  Now  click  on  frame  3. 

•  Add  this  script  in  the  Actions  Panel: 

stop() ; 

onEnterFrame ; 

c  =  Number  (a) +Nuimber  (b)  ; 

int3   =  c  ; 

•  The  animation  is  complete  now. 

•  Click  Ctrl  +Enter  to  view  the  animation 

•  Put  the  values  and  just  press  equal  sign  to  find  out  the  val- 
ues. 
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9.12  List  of  Important  Syntaxes  used  in  Flash 


Array([numElements],  [elementN]):  Array 

It  is  used  to  create  a  new  and  empty  array.  It  can  also  convert  an 
element  that  is  specified  to  an  array. 

Boolean(expression:Object) :  Boolean 

It  can  convert  the  parameter  expression  to  a  Boolean  value  at  the 
same  time  it  returns  either  true  or  false. 

call(frame:Object) 

It  can  execute  the  script  in  the  called  frame  without  the  move- 
ment of  the  playhead  to  that  frame. 

chr(number:Number) :  String 

It  has  been  Denounce  since  Flash  Player  5.  This  function  was  also 
denounced  to  favor  the  String. 

fromCharCodeO. 

It  can  convert  the  code  numbers  of  ASCII  to  the  characters. 
clearlnterval(intervallD:Number) 

It  is  used  to  cancel  an  interval  that  is  created  by  a  call  to 
setlnterval(). 

duplicateMovieClip(target:Object,  newname:String,  depth:Number) 

While  playing  the  SWF  file,  it  is  used  to  develop  an  instance  of  a 
movie  clip. 

escape(expression:String) :  String 

It  is  used  to  convert  the  parameter  to  a  string  and  to  encode  it  in 
a  URL-encoded  format.  In  this  format  all  nonalphanumeric  char- 
acters are  restored  with  %  hexadecimal  sequences. 

eval(expression:Object) :  Object 

It  can  access  various  objects  as  variables,  properties,  objects,  or 
movie  clips  by  name. 
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fscommand(command:String,  parameters:String) 

It  is  used  to  communicate  a  SWF  file  with  the  Flash  Lite  player  or 
the  environment  for  a  mobile  device.  An  operating  system  is  one 
of  those  environments. 

fscommand2(command:String,  parameters:String) 

It  is  used  to  communicate  the  SWF  file  with  the  Flash  Lite  player 
.It  can  also  communicate  the  SWF  file  with  a  host  application  on 
a  mobile  device. 

getProperty(my_mc:Object,  property:Object) :  Object 

It  can  return  the  value  of  the  specific  property  for  the  movie  clip 
my_mc. 

getTimerO :  Number 

It  can  return  the  number  of  milliseconds  which  have  not  been 
used  since  the  SWF  file  started  playing. 

getURL(url:String,  [window:String],  [method:String]) 

It  can  load  a  document  from  a  particular  URL  into  a  window  or  it 
can  pass  variables  to  another  application  at  a  defined  URL. 

getVersionO :  String 

It  can  return  a  string  that  contains  Flash  Player  version  as  well  as 
the  platform  information. 

gotoAndPlay([scene:String],  frame:Object) 

It  is  used  to  send  the  playhead  to  the  specific  frame  in  a  scene  and 
at  the  same  time  it  can  play  from  that  particular  frame. 

gotoAndStop([scene:String],  frame:Object) 

It  can  send  the  playhead  to  a  particular  frame  in  a  scene  and  it  can 
stop  it. 

ifFrameLoaded([scene:String],  frame:Object,  statement(s):Object) 

It  has  been  denounce  since  Flash  Player  5.  This  function  has  been 
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denounced.  Here  Adobe  recommends  that  we  should  use  the 
MovieClip._framesloaded  property. 

It  can  check  if  the  contents  of  a  specified  frame  are  available  locally. 
int(value:Number) :  Number 

It  has  been  denounced  since  Flash  Player  5  to  favor  Math.round(). 
It  can  convert  a  decimal  number  to  an  integer  value  and  it  is  done 
by  truncating  the  decimal  value. 

isFinite(expression:Object) :  Boolean 

It  is  used  to  evaluate  expression  and  to  return  either  true  if  it  is  a 
finite  number  or  false  if  it  is  infinity  or  negative  infinity. 

isNaN(expression:Object) :  Boolean 

It  can  evaluate  the  parameter  and  can  return  true  value  if  the 
value  is  NaN.  This  value  can  not  be  a  number. 

length(expression:String,  variable:Object) :  Number 

It  has  been  denounced  since  Flash  Player  5.  This  function  as  well 
as  all  the  string  functions  have  been  denounced.  According  to  the 
recommendation  of  Macromedia  we  should  use  the  methods  of 
the  String  class  and  the  String.  Length  property  in  order  to  per- 
form the  same  operations. 

It  can  return  the  length  of  a  specific  string  or  variable. 
loadMovie(url:String,  target :Object,  [method:String])  It  can  load  an 
SWF  or  a  JPEG  file  into  Flash  Player  when  the  original  SWF  file  is 
playing. 

loadMovieNum(url:String?  level:Number,  [method:String]) 

It  can  load  an  SWF  or  a  JPEG  file  into  a  level  in  Flash  Player  when 
the  SWF  file  that  is  originally  loaded  is  playing. 

loadVariables(url:String,  target:Object,  [method:String]) 

It  read  data  from  an  external  file  as  a  text  file  or  a  text  that  is  gen- 
erated by  ColdFusion,  a  CGI  script,  Active  Server  Pages  (ASP),  PHP, 
or  Perl  script,  and  it  can  set  the  values  for  variables  in  a  target 
movie  clip. 
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loadVariablesNum(url:String,  level:Number,  [method:String]) 

It  read  data  from  an  external  file  as  a  text  file  or  text  that  is  gen- 
erated by  a  ColdFusion,  CGI  script,  ASP,  PHP,  or  Perl  script,  and  it 
can  set  the  values  for  variables  in  a  Flash  Player  level. 

mbchr(number:Number) 

It  has  been  denounced  since  Flash  Player  5.  This  function  has  been 

denounced  to  favor  the  String.fromCharCode()  method. 

It  can  also  convert  an  ASCII  code  number  to  a  multibyte  character. 

mblength(string:String) :  Number 

It  has  been  denounced  since  Flash  Player  5.  This  function  has  been 

denounced  to  favor  the  String.length  property. 

It  can  return  the  length  of  the  multibyte  character  string. 

mbord(character:String) :  Number 

It  has  been  denounced  since  Flash  Player  5.  This  function  has  been 

denounced  to  favor  String.charCodeAtQ  method. 

It  can  convert  the  specific  character  to  a  multibyte  number. 

mbsubstring(value:String,  index:Number,  count:Number) :  String 

It  has  been  deprecated  since  Flash  Player  5.  This  function  has  also 
been  denounced  to  favor  the  String.substr()  method. 
It  can  extract  a  new  multibyte  character  string  from  a  multibyte 
character  string. 

nextFrameO 

It  can  send  the  playhead  to  the  next  frame. 
nextSceneO 

It  can  send  the  playhead  to  Frame  1  of  the  next  scene. 

Number(expression:Object) :  Number 

It  can  convert  the  parameter  expression  to  a  number. 

Object([value:Object]) :  Object 

It  can  create  a  new  empty  object  and  it  can  also  convert  the  spe- 
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cific  number,  string,  or  Boolean  value  to  an  object. 
on(mouseEvent:Object) 

It  is  used  to  specify  the  mouse  event  or  keypress  that  can  trigger 
an  action. 

onClipEvent(movieEvent:Object) 

It  is  used  to  trigger  the  actions  that  are  defined  for  a  specific 
instance  of  a  movie  clip. 

ord(character:String) :  Number 

It  has  been  denounced  since  Flash  Player  5.  This  function  has  also 
been  denounced  to  favor  of  the  methods  and  properties  of  the 
String  class. 

It  can  convert  characters  to  ASCII  code  numbers. 

parselnt(expression:String,  [radix:Number]) :  Number 

This  converts  a  string  into  an  integer. 

playO 

This  helps  in  moving  the  playhead  forward  in  the  Timeline. 
prevFrameO 

This  syntax  helps  in  sending  the  playhead  to  the  previous  frame. 
prevSceneO 

This  syntax  is  used  to  send  the  playhead  to  the  1st  frame  of  the  pre- 
vious scene. 

random(value:Number) :  Number 

The  function  of  this  syntax  is  to  return  a  random  integer  which 
varies  between  0  and  one  less  than  the  integer  which  is  specified 
in  the  value  parameter. 

removeMovieClip(target:Object) 

This  syntax  is  used  to  delete  a  specific  movie  clip. 
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setlnterval(functionName:Object,  interval:Number,  [param:Object], 
objectName:Object,  methodName:String) :  Number 

The  function  of  this  syntax  is  to  call  a  function,  a  method  or  an 
object  at  periodic  intervals  while  a  SWF  file  plays. 

setProperty(target:Object,  property:Object,  expressiomObject) 

This  syntax  helps  in  changing  the  property  value  of  a  movie  clip 
when  the  movie  plays. 

startDrag(target:Object,  [lock:Boolean],  [left,top,right,bottom:Number]) 

The  syntax  helps  in  making  the  target  movie  clip  dragable  when 
the  movie  plays. 

stopO 

This  syntax  stops  a  currently  playing  SWF  file. 
stopANSoundsO 

This  syntax  stops  all  sounds  in  a  currently  playing  SWF  file. 
However,  it  does  not  stop  the  playhead. 

stopDragO 

This  syntax  puts  a  stop  to  the  current  drag  operation. 
String(expression:Object) :  String 

This  syntax  is  used  to  get  back  a  string  representation  of  a  speci- 
fied parameter. 

substring(string:String,  index:Number,  count:Number) :  String 

This  syntax  is  used  in  extracting  a  part  of  a  string. 

targetPath(targetObject:Object) :  String 

This  syntax  when  used,  returns  a  string  which  contains  the  target 
path  of  movieClipObject. 

tellTarget(target:String,  statement(s):Object) 

This  syntax  is  used  to  apply  the  instructions  which  are  specified  in 
the  statements  parameter  to  the  Timeline  specified  in  the  target 
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parameter. 
toggleHighQualityO 

This  syntax  helps  in  turning  the  anti  aliasing  on  and  off  in  Flash 
player. 

trace(expression:Object) 

The  function  of  this  syntax  is  to  evaluate  the  expression  and  out- 
put the  result. 

unescape(string:String) :  String 

This  syntax  performs  manifold  functions.  It  first  evaluates  the 
parameter  X  as  a  string.  Thenit  decodes  the  string  from  the  URL 
encoded  format.  While  doing  the  decoding,  it  converts  all  the 
hexadecimal  sequences  to  ASCII  characters.  Lastly,  it  returns  the 
string. 

unloadMovie(target) 

This  syntax  is  useful  in  removing  a  movie  clip  which  had  been 
loaded  from  Flash  Player  by  means  of  loadMovie(). 

unloadMovieNum(level:Number) 

The  function  of  this  syntax  is  to  remove  a  SWF  or  an  image  from 
Flash  Player  which  had  been  loaded  by  means  of  loadMovieNumQ. 
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Important  Terminology 
Used  In  Flash  CS3 

.as  file:  This  is  a  text  file  format  that  includes  ActionScript  code 
only. 

.fla:  This  is  an  editable  Flash  source  file.  We  can  only  open  it  by 
using  the  Adobe  Flash. 

ilv:  This  is  a  Flash  Video  file. 

.html:  This  is  the  file  extension  of  the  Hyper  Text  Markup 
Language.  This  file  format  can  display  a  Flash  movie  in  a  Web 
browser. 

.swd:  This  file  format  is  developed  while  selecting  Control,  Debug 
Movie.  We  can  use  this  file  format  for  remote  debugging. 

.swf:  This  is  a  Flash  output  file  that  is  developed  while  testing  or 
publishing  a  flash  movie.  This  file  is  intended  for  various  allot- 
ments. This  file  format  can  be  embedded  into  a  webpage. 

ActionScript  3:  This  is  the  updated  version  of  ActionScript.  This 
version  is  preferred  in  Flash  CS3. 

ActionScript:  This  is  the  scripting  language  that  is  used  in  Flash. 
There  are  two  versions  of  ActionScript:  ActionScript  2.0  and 
ActionScript  3.0. 

AS2  /  ActionScript  2:  This  is  the  earlier  versions  of  ActionScript. 
This  is  a  scripting  language.  It  has  a  huge  similarity  with  Java.  The 
AS2  is  the  acronym  of  ActionScript  2. 

Aspect  ratio:  The  aspect  ratio  is  the  ratio  of  height  and  width.  The 
shape  of  a  Flash  animation  remains  same  irrespective  of  its  size. 
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Bitmapped  graphic:  This  is  one  of  the  image  file  formats,  which 
includes  the  information  of  the  color  for  every  pixel. 

Blank  keyframe:  This  is  a  key  frame  where  nothing  appears  on  the 
stage. 

Brightness:  This  property  of  the  color  defines  the  quantity  of 
whiteness  that  is  to  be  added. 

Button  state:  The  Button  state  is  the  visual  version  of  a  button. 
There  are  three  button  states  such  as  down  state,  up  state  and  over 
state. 

Button:  This  is  the  key  that  is  clicked  by  the  user  to  happen  an  action. 

Coordinates:  The  Coordinates  are  the  numbers  that  can  signify  a 
place  in  a  Cartesian  plane.  The  Coordinates  are  represented  by  X 
andY. 

Down  button  state:  The  button  remains  in  its  down  state  when  a 
user  clicks  a  button. 

Event:  The  events  can  be  triggered  by  ActionScript.  The  'press'  and 
'click'  are  the  two  most  familiar  events  that  are  called  by  the  users. 
The  onLoad  and  the  onClick  are  the  two  automatic  events. 

Filters:  We  can  add  various  visual  effects  to  the  texts  and  to  the 
symbols  by  using  the  filters.  The  drop  shadow  is  one  of  those 
effects. 

Frame  by  Frame  Animation:  This  form  of  animation  can  use  a 
series  of  key  frames  without  any  tweening. 

Frame  rate:  The  Frame  rate  is  the  frames-per-second  rate  (FPS)  that 
the  animation  can  play.  The  default  Flash  frame  rate  is  12  FPS.  This 
rate  is  very  slow  and  it  will  look  broken  up  and  here  the  details  dis- 
tort too  fast. 


124 


ZM\  FAST  TRACK 


FLASH  CS3 


IMPORTANT  TERMINOLOGY  USED  IN  FLASH 


X 


Frames:  A  lot  of  empty  frames  are  available  in  the  Timeline.  The 
images  displayed  in  the  Flash  application  are  arranged  in  the 
Timeline.  In  order  to  edit  the  sequence  of  Animation  we  can  easi- 
ly edit  the  frames  in  the  Timeline. 

Grid:  The  Grids  are  the  set  of  lines  that  appear  on  the  Workspace. 

Guide  layers:  The  Guide  layers  are  a  special  type  of  layers  that  are 
not  exported  while  exporting  a  Flash  file. 

Hue:  Along  with  brightness  and  saturation  the  hue  is  a  way  to 
describe  a  color.  This  is  a  solid  color. 

Instance:  The  Instance  is  a  presence  of  a  symbol  on  Stage  and  these 
are  used  from  the  Library.  A  number  of  symbols  may  appear  on 
Stage  but  we  can  only  save  the  master  symbol.  It  helps  to  keep  the 
file  size  small. 

Keyframe:  A  keyframe  is  nothing  but  a  frame  where  we  can  iden- 
tify a  change  in  an  animation.  Here  we  can  also  include  frame 
actions  in  order  to  edit  a  document.  We  can  arrange  these 
keyframes  in  the  Timeline  to  make  the  necessary  changes  in 
sequence  in  the  Animation. 

Layers:  The  Layers  in  the  Timeline  are  the  arrangement  of  frames. 
We  can  organize  the  artwork  in  our  Flash  document  by  the  help  of 
Layers.  We  can  edit  the  objects  that  are  placed  on  one  layer  with- 
out affecting  the  objects  of  other  layers. 

Mask  and  Masked  layers:  These  layer  properties  always  come  in 
pairs  and  these  pairs  are:  the  layer  for  the  mask  and  the  layer  for 
the  object  that  is  masked. 

Morph:  A  particular  type  of  animation  that  can  transit  from  one 
shape  to  another. 

Motion  Tweening:  In  Flash,  motion  tweens  can  only  be  applied  on 
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instances  of  symbols.  While  using  a  Motion  Tween,  properties  like 
size,  position,  rotation  of  an  instance  can  be  defined  easily.  The 
values  of  all  these  properties  can  later  be  altered  at  keyframes. 

Off  Stage:  The  Off  Stage  is  the  grey  area  outside  the  Stage  of  the 
workspace. 

Onion  Skin  Tool:  By  using  the  Onion  Skin  Tool  we  can  edit  a 
keyframe  while  viewing  the  frames  that  are  placed  before  and 
after  the  current  frame. 

Over  button  state:  While  hovering  over  the  button  the  button 
state  remains  in  the  Over  button  state. 

Panels  in  Flash:  The  Panels  in  Flash  consist  of  the  Properties 
Inspector,  Tool  Bar,  Actions  Panel,  Components  Panel  and  the 
Color  Mixer. 

Playhead:  The  Playhead  in  Flash  points  out  the  current  frame  that 
is  displayed  on  the  Stage.  The  Playhead  moves  through  the 
Timeline.  The  frame  numbers  of  an  animation  are  indicated  by  the 
Timeline  header.  If  a  frame  is  to  be  displayed  on  the  Stage,  then  in 
the  Timeline,  the  playhead  is  moved  to  the  frame. 

Property  Inspector:  The  Property  Inspector  in  Flash  displays  all 
the  information  regarding  the  object  that  is  selected.  Here  you  can 
find  information  and  settings  of  the  current  document,  symbol, 
text,  shape,  bitmap,  group,  frame,  video  or  tool. 

Rulers:  These  rulers  can  be  seen  along  the  top  and  the  left  side  of 
the  workspace.  There  are  two  types  of  Rulers:  Vertical  rulers  and 
the  Horizontal  rulers. 

Saturation:  Along  with  brightness  and  hue  the  saturation  is  a  way 
to  define  a  color.  The  saturation  is  the  intensity  of  the  applied 
color. 

Scene:  A  Scene  is  a  particular  section  of  a  Timeline  in  a  Flash  file. 
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Shape  Tweening:  In  Flash,  shape  tweens  create  animation  which 
morph  into  one  another.  It  is  necessary  to  break  apart  a  group  or 
symbol  before  they  can  be  used  for  creating  a  shape  tween. 

Stage:  There  is  a  rectangular  area  in  Flash  which  displays  vector 
art,  graphic  content,  buttons,  text  boxes,  video  clips,  imported 
bitmap  graphics  etc.  This  area  is  called  the  Stage.  This  is  the  main 
working  area  of  Flash.  Changes  in  the  background  color  and  size 
of  the  Stage  can  be  done  from  the  Property  Inspector. 

Symbols:  The  Symbols  in  Flash  stand  for  a  button,  graphic  or 
movie  clip  that  are  created  in  Flash.  The  symbols  in  Flash  remain 
as  the  part  of  the  Library  for  the  current  document.  The  symbol  is 
created  only  once.  The  symbol  can  then  be  used  again  and  again 
throughout  the  same  document  or  can  be  used  in  other  docu- 
ments too. 

The  Library  Panel:  The  Library  Panel  in  Flash  acts  as  a  storehouse. 
This  is  the  place  where  all  the  symbols  created  in  Flash  are  stored 
in  an  organized  manner.  Imported  Files  which,  include  sound  files 
and  bitmap  graphics,  are  also  stored  here.  The  Library  is  also  a 
good  place  to  store  the  Video  clips. 

Timeline:  The  function  of  the  Timeline  is  to  organize  and  control 
the  content  of  a  document  over  time  in  frames  as  well  as  in  layers. 

Tools  Panel:  The  Tools  Panel  in  Flash  comprises  of  both  the  paint- 
ing and  drawing  tools.  The  different  types  of  tools  that  are  avail- 
able here  are  used  to  draw  free  forms,  shapes,  paths  and  precise 
lines.  The  tools  can  also  be  used  for  painting  filled  objects. 

Tweening:  Tweening  can  be  used  in  order  to  create  animations  in 
Flash.  Tweening  helps  to  make  changes  and  create  movements 
over  time.  It  also  helps  in  reducing  the  size  of  the  file.  Flash  usu- 
ally stores  the  values  for  keyframes  in  case  of  tweened  animations. 
There  are  two  kinds  of  tweened  animations  in  Flash  and  these  are 
Shape  Tween  and  Motion  Tween. 
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Up  button  state:  In  the  inactive  state  of  the  button  the  button 
remains  in  the  Up  state. 

URL:  URL  is  the  acronym  of  Uniform  Resource  Locator.  It  is  a  Web 
address. 

Variable:  The  variables  are  the  containers  of  data  like  values,  num- 
bers and  strings.  These  values  can  be  accessed  later. 
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